CODEWITHSUNDEEP
reactjsreact-routerjestjsenzyme
Oliver Watkins
Oliver Watkins

Reputation: 13549

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.

Upvotes: 3

Views: 428

Answers (2)

x00
x00

Reputation: 13863

Use

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

Sources of info:

  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

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

Upvotes: 2

Oliver Watkins
Oliver Watkins

Reputation: 13549

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.

Upvotes: 1

Related Questions