测试时无法使用 MemoryRouter 导航到路径

Question

我已经密切关注示例，但我无法让 MemoryRouter（您应该如何测试路由组件？）使用 jest 和酶进行测试。

我想导航到其中一条路线，并将其反映在我的快照中。下面的代码尝试使用 MemoryRouter 导航到“/A”，所以我假设我会看到<div>A</div>

import React from 'react';
import Enzyme, {mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {BrowserRouter as Router, MemoryRouter, Route, Switch} from 'react-router-dom';

Enzyme.configure({adapter: new Adapter()});

describe('Routing test', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(
            <MemoryRouter initialEntries={["/A"]}>
                    <div className={"Test"}>This is my Test Component and should not have any test specific code in it
                        <Router>
                            <Switch>
                                <Route path={"/A"}>
                                    <div className={"A"}>A</div>
                                </Route>
                                <Route path={"/B"}>
                                    <div>B</div>
                                </Route>
                            </Switch>
                        </Router>
                    </div>
                </MemoryRouter>
        );
    });
    afterEach(() => {
        wrapper.unmount();
    });

    it('matches snapshot', () => {
        expect(wrapper.find(".Test")).toHaveLength(1); //this ok
        expect(wrapper.find(".A")).toHaveLength(1); //but this is not ok :( It should find  A
    });
});

我只看到<div>Test</div>而不是<div>Test<div>A</div></div>

注意：我的示例被简化为一类。我的真实情况是<div>Test...</div> 是一个单独的组件。

Answer 1

通常路由器将在应用程序逻辑之外，如果您使用其他 <Route> 标签，那么您可以使用类似 <Switch> 的标签，如下所示：

  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog">
        <BlogPost />
      </Route>
    </Switch>
  </Router>

MemoryRouter 实际上是 Router，所以最好替换这里的“真实”Router。您可以将其拆分为一个单独的组件以便于测试。

根据source GitHub：

使用低级 <Router> 的最常见用例是 将自定义历史记录与 Redux 或 Mobx 等状态管理库同步。请注意，在 React Router 旁边使用状态管理库不需要这样做，它仅用于深度集成。

import React from "react";
import ReactDOM from "react-dom";
import { Router } from "react-router";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  node
);

个人经验：

我使用了一个外部组件（我们称之为“根”），它在顶层包含<Provider> 和<Router> 组件，然后<App> 只包含<Switch> 和<Route> 组件。

Root.jsx 返回：

<Provider store={rootStore}>
  <Router history={rootHistory}>
    <App />
  </Router>
</Provider>

和App.jsx 返回：

<Switch>
  <Route exact path="/" component={HomePage}>
  <Route exact path="/admin" component={AdminPage}>
</Switch>

这允许App.test.jsx 使用：

mount(
  <Provider store={fakeStore}>
    <MemoryRouter initialEntries={['/']}>
      <App myProp={dummyProp} />
    </MemoryRouter>
  </Provider>
)

Answer 2

好的，我想通了。

它非常难看，但您需要创建一个__mocks__ 目录（在您项目的第一级）。 __mocks__ 的文档似乎很差，但这似乎是个笑话，这里的所有内容都会在测试时运行，在这里您可以为某些外部库添加模拟存根。

import React from 'react';

const reactRouterDom = require("react-router-dom")
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>

module.exports = reactRouterDom

我的测试文件与我的问题相同（我认为）：

import React from 'react';
import Enzyme, {mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import {BrowserRouter as Router, MemoryRouter, Route, Switch} from 'react-router-dom';

Enzyme.configure({adapter: new Adapter()});

describe('Routing test', () => {
    let wrapper;

    beforeEach(() => {
        wrapper = mount(
            <MemoryRouter initialEntries={['/A']}>
                    <div className={"Test"}>This is my Test Component and should not have any test specific code in it
                        <Router>
                            <Switch>
                                <Route path={"/A"}>
                                    <div className={"A"}>A</div>
                                </Route>
                                <Route path={"/B"}>
                                    <div>B</div>
                                </Route>
                            </Switch>
                        </Router>
                    </div>
                </MemoryRouter>
        );
    });
    afterEach(() => {
        wrapper.unmount();
    });

    it('matches snapshot', () => {
        expect(wrapper.find(".Test")).toHaveLength(1); //this ok
        expect(wrapper.find(".A")).toHaveLength(1); //but this is not ok :( It should find  A
    });
});

这行得通，我的测试是绿色的！ :)

更新：

我想我有点困惑，因为我将路由器视为任何其他反应组件，而它实际上是像 redux Provider 这样的顶级组件。路由器不应位于 App 内部，而应位于 App 外部（例如在 index.js 文件中）。

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App/>,
        </Router>
    </Provider>,
    document.getElementById('root')
);

现在在针对 App 编写测试时，我提供了自己的路由器，例如 MemoryRouter。

Answer 3

1. 我找不到任何证据，但我一直觉得你应该在树顶的某个地方只使用一个 <Router> 并且不应该嵌套它们。
   所以我自己查看了源代码，如果我做对了，这是真的。因为：

   1. react-router 使用 Context API 将 props 向下传递。
   2. 来自React docs：

      [...] 它将从树中匹配Provider 的最近 读取当前上下文值。

   3. <Router> 是 Provider 但不是 Consumer，因此它无法从父 <Router> 处查看道具

2. 当人们提倡测试时，他们还提到编写测试会产生更可测试的代码，并且更可测试的代码更干净。我不会为此争论，我只是不想指出，如果您可以编写可测试的代码，那么您也可以编写不可测试的代码。看起来就是这样。

   所以虽然你特意这么说

   其中不应包含任何测试特定代码

   我认为，虽然您可能不应该像 @aquinq 建议的那样使用 createMemoryHistory，或者专门添加任何其他内容并且仅用于测试目的，但您可以并且可能应该修改 你的代码更易于测试。

   你可以：

   1. 将<Router> 上移。您甚至可以用它包裹<App> - 这是最简单且推荐的方式，但可能不适用于您的情况。但我仍然不明白为什么不能将<div className={"Test"}> 放在<Router> 中，反之亦然。
   2. 在你的测试中你不应该测试第三方库，你应该测试你自己的代码，所以你可以提取这个

      <Switch>
        <Route path={"/A"}>
          <div className={"A"}>A</div>
        </Route>
        <Route path={"/B"}>
          <div>B</div>
        </Route>
      </Switch>
      

      分成一个单独的组件并单独测试。
   3. 或者如果我们把这两者结合起来：把<div className={"Test"}>放在<Router>里面，把<div className={"Test"}>提取成一个单独的组件，写

      wrapper = mount(
        <MemoryRouter initialEntries={["/A"]}>
          <TestDiv/>
        </MemoryRouter>
      )
      

   4. createMemoryHistory 本身也可以是一个有用的功能。在未来的某个时间，你会发现自己在使用它。在这种情况下，@aquinq 的答案就可以了。

3. 但是，如果您根本不能/不想修改您的代码。然后你可以稍微作弊，试试这个方法：How to test a component with the <Router> tag inside of it?

Answer 4

根据documentation，如果你在测试中使用普通的Router，你应该传递一个history prop给它

虽然您可能很想自己存根路由器上下文，但我们建议您将单元测试包装在其中一个路由器组件中：基础 Router 与历史道具，或 <StaticRouter>、<MemoryRouter>、或<BrowserRouter>

希望这会奏效。如果没有，也许使用第二个MemoryRouter 而不是Router 就可以完成这项工作。