Cannot test redirecting in react router with enzyme

问题

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

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();
    });
});

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.

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

回答1:

It appears I need to have { button: 0 } as an argument for enzyme :

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);
});

Not sure why this is, but I came across it looking at some similar questions.

回答2:

Use

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

Sources of info:

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

Also may be of interest: wrapping-a-react-router-link-in-an-html-button

来源：https://stackoverflow.com/questions/62411156/cannot-test-redirecting-in-react-router-with-enzyme

标签

reactjs

react-router

enzyme

jest