配置 Jest 时的配置问题 - TypeScript

Question

可能我有一个配置问题，我只是不知道具体在哪里。错误消息是当我运行测试时：

TypeError: Cannot read properties of undefined (reading 'Brand')

      14 |                 className='bg-body-tertiary shadow-lg'>
      15 |                 <Container>
    > 16 |                     <Navbar.Brand href='#'>
     |                             ^
      17 |                         Skill Hunter
      18 |                     </Navbar.Brand>
      19 |                     <Navbar.Toggle aria-controls='basic-navbar-nav' />

我的

package.json

：

{
  "name": "skillhunter-reactjs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^1.6.5",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.10.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-router-dom": "^6.21.2"
  },
  "scripts": {
    "dev": "vite",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/cypress": "^10.0.1",
    "@testing-library/dom": "^9.3.4",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "cypress": "^13.6.4",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "ts-jest": "^29.1.2",
    "ts-node": "^10.9.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

我的

jest.config.ts

import type { Config } from '@jest/types';

const config: Config.InitialOptions = {
    verbose: true,
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    "moduleNameMapper": {
    "axios": require.resolve("axios"),
    "\\.(css|less|scss)$": "identity-obj-proxy",
    },
    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

export default config;

测试是

import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import '@testing-library/jest-dom'; 

// https://testing-library.com/docs/example-react-router/
test('navigating to admin / prog langs', async () => {
    const adminMenu = await clickOnAdminMenu();
    await userEvent.click(adminMenu.getByText(/Programming Languages/i));

    expect(screen.getByText(/List of Programming Languages/i)).toBeInTheDocument();
});

async function clickOnAdminMenu() {
    render(<App />, { wrapper: BrowserRouter });

    // first simulating to click on the 'Administration'
    const tMenuAdmin: HTMLElement = screen.getByTestId('t-menu-admin');
    await userEvent.click(within(tMenuAdmin).getByRole('button'));
    screen.debug();
    return within(tMenuAdmin);
}

App.tsx

是

import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import ProgLangList from './components/admin/prog-lang/ProgLangList';
import Missing from './components/Missing';
import RepositoryList from './components/admin/repository/RepositoryList';
import Dashboard from './components/Dashboard';
import 'bootstrap/dist/css/bootstrap.min.css';
import { ProgLangProvider } from './context/ProgLangProvider';
import { RepositoryProvider } from './context/RepositoryProvider';

function App() {
    return (
    <Routes>
        <Route path='/' element={<Layout />}>``
            <Route index element={<Dashboard />} />
            <Route path='admin'>
                <Route path='prog-langs'>
                    <Route index element={<ProgLangProvider><ProgLangList /></ProgLangProvider>} />
                </Route>
                <Route path='repositories'>
                    <Route index element={<RepositoryProvider><RepositoryList /></RepositoryProvider>} />
                </Route>
            </Route>
            <Route path="*" element={<Missing />} />
        </Route>
    </Routes>
    )
}

export default App

Layout.tsx

import Header from './Header';
import Footer from './Footer';
import { Outlet } from 'react-router-dom';
import { ReactElement } from 'react';

const Layout = (): ReactElement => {
    return (
    <div className='body'>
        <Header />
        <div className='main'>
            <Outlet />
        </div>
        <Footer />
    </div>
    )
}

export default Layout;

而

Header.tsx

就是它抱怨的地方

import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import Container from 'react-bootstrap/Container'
import NavDropdown from 'react-bootstrap/NavDropdown'
import { FaUserNinja } from 'react-icons/fa6'
import { Link } from 'react-router-dom'
import { ReactElement } from 'react'

const Header = (): ReactElement => {
    return (
    <header>
        <Navbar 
            expand='lg' 
            className='bg-body-tertiary shadow-lg'>
            <Container>
                <Navbar.Brand href='#'>
                    Skill Hunter
                </Navbar.Brand>
                <Navbar.Toggle aria-controls='basic-navbar-nav' />

它似乎不喜欢

<Navbar.Brand>

元素，但不知道为什么。

有什么想法吗？

Answer 1

我在

tsconfig.json

中犯了一个愚蠢的错误，我忘记包含所有相关的

.ts

文件，现在看起来像

"include": ["**/*.ts", "**/*.tsx", "./testSetup.ts"],

现在可以了。