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

Question

我已经密切关注这些例子，但我无法得到 内存路由器 (这是您应该如何测试路由组件？)使用 Jest 和 enzyme 进行测试。

我想导航到其中一条路线，并将其反射(reflect)在我的快照中。下面的代码尝试使用 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>A</div></div>我刚看到 <div>Test</div>
注意:我的例子被简化为一类。我的真实世界情况是 <div>Test...</div>是一个单独的组件。

Answer 1

根据 documentation , 如果您使用常规 Router在您的测试中，您应该通过 history支持它

While you may be tempted to stub out the router context yourself, we recommend you wrap your unit test in one of the Router components: the base Router with a history prop, or a <StaticRouter>, <MemoryRouter>, or <BrowserRouter>

希望这会奏效。如果没有，也许使用第二个 MemoryRouter而不是 Router将简单地完成工作。