无法使用存储路由器导航到路径

Question

我已经密切关注了这些示例，但是我无法使MemoryRouter能够使用笑话和酶处理快照。

我想导航到其中一条路线，并将其反映在快照中。下面的代码尝试使用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';
import {renderToStaticMarkup} from "react-dom/server";

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

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

    beforeEach(() => {
        wrapper = mount(
                <MemoryRouter initialEntries={["/A"]}>
                    <div>Test
                        <Router>
                            <Switch>
                                <Route path={"/A"}>
                                    <div>A</div>
                                </Route>
                                <Route path={"/B"}>
                                    <div>B</div>
                                </Route>
                            </Switch>
                        </Router>
                    </div>
                </MemoryRouter>
        );
    });
    afterEach(() => {
        wrapper.unmount();
    });

    it('matches snapshot', () => {
        expect(renderToStaticMarkup(wrapper)).toMatchSnapshot();
    });
});

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

Answer 1

根据documentation，如果您在测试中使用常规的Router，则应向其传递history道具

虽然您可能会自己尝试使用路由器上下文，但我们建议您将单元测试包装在以下路由器组件之一中：带有历史记录道具的基础Router或<StaticRouter>，<MemoryRouter>或<BrowserRouter>

希望这会起作用。如果没有，也许使用第二个MemoryRouter而不是Router会很简单。