使用 React Router 进行的导航测试失败

Question

在我的代码中，我将 react-router-dom 与 react-boostrap 元素一起使用。我一直在尝试做一些导航测试。我在单元测试方面没有经验，所以每一个提示都会受到赞赏。

我的路线在单独的文件中：

function Routes() {
    return (
        <div className="App">
            <Header />
            <Switch>
                <Route exact path="/">
                    <Container>
                        <Row className="mt-3">
                            <Deck />
                        </Row>
                        <Row className="mt-3">
                            <Deck />
                        </Row>
                    </Container>
                </Route>
                <Route path="/about">
                    <h1>About_us</h1>
                </Route>
                <Route path="/dashboard">
                    <h1>Dashboard</h1>
                </Route>
                <Route path="/faq">
                    <h1>FAQ</h1>
                </Route>
                <Route path="/login">
                    <LoginPage />
                </Route>
                <Route path="/signup">
                    <SignUpPage />
                </Route>
                <Route>
                    <h1>Bad page</h1>
                </Route>
            </Switch>
        </div>
    );
}

export default Routes;

单元测试部分：

import '@testing-library/jest-dom';
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

import Routes from '../src/Routes.js';


test('full app navigating', async () => {

    render(
        <MemoryRouter initialEntries={['/']}>
            <Routes />
        </MemoryRouter>
    );

    expect(screen.getAllByText(/Card info/i)[0]).toBeInTheDocument();


    fireEvent.click(screen.getByText(/Flashcards/i));
    let result = await screen.findAllByText(/Card info/i);
    expect(result[0]).toBeInTheDocument();

    fireEvent.click(screen.getByText(/Home/i));
    result = await screen.findAllByText(/Card info/i);
    expect(result[0]).toBeInTheDocument();


    fireEvent.click(screen.getByText(/About/i));
    result = await screen.findByText(/About_us/i);
});

所以在路径“/”上，我正在显示 Deck 组件，其中基本上包含“Card info”文本。这就是我搜索该文本的原因。另一方面，路径“/about”只呈现 <h1>About_us</h1>。当我运行时，应用程序工作正常，但用玩笑测试会导致错误：

FAIL  tests/Routes.test.js
  × full app navigating (1123 ms)

  ● full app navigating

    TestingLibraryElementError: Unable to find an element with the text: /About_us/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

看来我在单元测试中导航不正确。

编辑：当我将 initialEntries 更改为“/about”时，应用程序会在该路径上呈现内容，因此路径会自行运行。它必须与该行相关：

fireEvent.click(screen.getByText(/About/i));

About 只是一个带有 href="/about" 的 bootstrap 标签，所以这就是我重定向到 /about 的方式。

Answer 1

好的，对于所有苦苦挣扎的人：问题是About_us。这非常令人困惑，因为实际上我有通过 React Router 的前端路由和通过 Express 的后端路由（基本上每个 GET 请求都会传递到 index.html，其中 React 处理要显示的内容）。解决方案是使用：

<Nav.Link as={Link} to="/about">About_us</Nav.Link>

所以整个标签表现为 React Router 元素，并且在测试环境中它正确导航到 /about。

使用 React Router 进行的导航测试失败

Failed navigation test with React Router

javascript

unit-testing

reactjs

react-bootstrap

react-router