reactjs - 无法使用 enzyme 在 react 路由器中测试重定向

Question

我正在尝试使用 enzyme 在我的应用程序中测试我的重定向按钮。

我不确定该怎么做，但我假设我只需要对包裹在 <Link> 中的按钮执行“点击”事件即可。 . (我将其命名为 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();
    });
});

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

注意:路由器 (BrowserRouter) 在我的 __mocks__ 中被模拟出来了文件夹。您可以有效地忽略它。

Answer 1

使用

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

信息来源:

1. https://github.com/enzymejs/enzyme/issues/516
2. https://github.com/ReactTraining/react-router/blob/0b634ba731cd609be316c6339924556b9ac8ff79/packages/react-router-dom/modules/Link.js#L43

---

也可能感兴趣:wrapping-a-react-router-link-in-an-html-button