无法使用酶在React Router中测试重定向 [英] Cannot test redirecting in react router with enzyme

问题描述

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

I am trying to test my redirect buttons in my application with enzyme.

我不确定该怎么做，但我想我只是要做包装在< Link> 中的按钮上的点击事件。 （我将其命名为takeMeToB）。见下文：

I am unsure how exactly to do this, but I assumme that I just have to do a 'click' event on the button that is wrapped in a <Link>. (I have named it takeMeToB). See below :

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。这就是我的测试失败的地方。

The first part of my test works. It finds A, but does not find B. But after the click then the 'B' route should be visible in the DOM and not A. That is where my test is failing.

注意：路由器（BrowserRouter）在我的 __ mocks __ 文件夹中被模拟。您可以有效地忽略它。

Note: the Router (BrowserRouter) is mocked out in my __mocks__ folder. You can effectively ignore it.

推荐答案

使用

...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

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

---

也可能感兴趣：在一个HTML按钮中包装一个反应路由器链接

这篇关于无法使用酶在React Router中测试重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！