Reactjs 无法在react路由器中测试重定向

我正试图在我的应用程序中用酶测试我的重定向按钮

我不确定该怎么做，但我想我只需要在包装在

中的按钮上执行“单击”事件。（我把它命名为takeMeToB）。见下文：

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

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

const history = createMemoryHistory();

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

    beforeEach(() => {
        wrapper = mount(
            <MemoryRouter history={history} 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>
                                    <Link to={"/B"}>
                                        <button className={"takeMeToB"}>
                                            Take me to B!!
                                        </button>
                                    </Link>
                                </Route>
                                <Route path={"/B"}>
                                    <div className={"B"}>B</div>
                                </Route>
                            </Switch>
                        </Router>
                    </div>
                </MemoryRouter>
        );
    });


    it('test redirect', () => {

        expect(wrapper.find(".Test")).toHaveLength(1);

        expect(wrapper.find(".A")).toHaveLength(1);
        expect(wrapper.find(".B")).toHaveLength(0);

        wrapper.find(".takeMeToB").at(0).simulate('click');

        expect(wrapper.find(".A")).toHaveLength(0);
        expect(wrapper.find(".B")).toHaveLength(1);
    });

    afterEach(() => {
        wrapper.unmount();
    });
});

从“React”导入React；
从“酶”导入酶，{mount}；
从'enzyme-Adapter-react-16'导入适配器；
从“react Router dom”导入{BrowserRouter as Router、Link、MemoryRouter、Route、Switch}；
从“历史记录”导入{createMemoryHistory}；
configure（{adapter:newadapter（）}）；
const history=createMemoryHistory（）；
描述（'路由测试'，（）=>{
让包装纸；
在每个之前（（）=>{
包装=装载(
这是我的测试组件，其中不应包含任何特定于测试的代码
A.
带我去B！！
B
);
});
它（'测试重定向'，（）=>{
expect（wrapper.find（“.Test”）.toHaveLength（1）；
expect（wrapper.find（“.A”）.toHaveLength（1）；
expect（wrapper.find（“.B”）.toHaveLength（0）；
在（0）处查找（“.takeMeToB”）。模拟（'click'）；
expect（wrapper.find（“.A”）.toHaveLength（0）；
expect（wrapper.find（“.B”）.toHaveLength（1）；
});
之后（（）=>{
wrapper.unmount（）；
});
});

我测试的第一部分工作。它找到了A，但没有找到B。但是单击之后，“B”路由应该在DOM中可见，而不是A。这就是我的测试失败的地方

---

注意：路由器（BrowserRouter）在我的

\uuuuu mocks\uuuu

文件夹中模拟出来。您可以有效地忽略它。

似乎我需要将

{button:0}

作为酶的参数：

it('matches snapshot', () => {

    expect(wrapper.find(".Test")).toHaveLength(1);

    expect(wrapper.find(".A")).toHaveLength(1);
    expect(wrapper.find(".B")).toHaveLength(0);

    wrapper.find('.takeMeToB').simulate('click', { button: 0 });

    expect(wrapper.find(".A")).toHaveLength(0);
    expect(wrapper.find(".B")).toHaveLength(1);
});

不知道为什么会这样，但我在看一些类似的问题时发现了它。

使用

...simulate('click', { button: 0 });

信息来源：

---

---

也可能有兴趣：

当我写我的答案时，你已经发布了你的：）不管怎样-我的链接中有解释“为什么”的链接