react typescript test history without modify the Component

Question

I have a simple NotFound.tsx that I would like to cover with a first test.

import React from "react";
import {Button} from "devextreme-react";
import "./NotFound.scss";
import {useHistory as UseHistory} from "react-router";

export default function NotFound(): JSX.Element {
    const history = UseHistory();

    function onClickOk() {
        history.replace("/home");
    }

    return (
        <div className={'not-found-container'}>
            <h1 className={'not-found-header'}>404</h1>
            <p className={'not-found-text'}>Page not found.</p>
            <p className={'not-found-description'}>The page you are looking for might have been removed.</p>
            <Button type="default"
                    text="Ok"
                    onClick={onClickOk} />
        </div>
    );
}

Now I would like to use the MemoryHistory so I can check if it navigates around. My NotFound.test.tsx:

Without Memoryhistory

import React from "react";
import {shallow} from "enzyme";
import {NotFound} from "../index";
import {useHistory as UseHistory} from "react-router";
    
test('test the not found page', () => {
    const history = UseHistory();
    history.push('/page1');
    history.push('/page2');
    const component = shallow(<NotFound />);
    component.find('Ok').simulate('click');
    expect(history.length).toMatch('2');
    expect(history.location.pathname).toMatch('/home');
    history.goBack();
    expect(history.location.pathname).toMatch('/page1');
});

This doesnt work because then he actually tries to navigate around as it seems.

Now I tried to mock it:

import React from "react";
import {shallow} from "enzyme";
import {NotFound} from "../index";
import {createMemoryHistory} from "history";
import {useHistory as UseHistory} from "react-router";

jest.mock('react-router-dom', () => ({
    useHistory: () => createMemoryHistory({ initialEntries: ['/page1', '/page2'] })
}));

test('test the not found page', () => {
    const history = UseHistory();
    const component = shallow(<NotFound />);
    component.find('Ok').simulate('click');
    expect(history.length).toMatch('2');
    expect(history.location.pathname).toMatch('/home');
    history.goBack();
    expect(history.location.pathname).toMatch('/page1');
});

This gives me an error: ReferenceError: C:\[...]src\Pages\NotFound\NotFound.test.tsx: The module factory of 'jest.mock()' is not allowed to reference any out-of-scope variables.

Other solutions I have already seen are:

1. Taking the history as an argument. I don't like this solution because I would prefer not having to modify my code for a test.

2. Creating somewhat like a history factory and importing that instead using the UseHistory() https://blog.logrocket.com/testing-the-react-router-usehistory-hook-with-react-testing-library/:

import { createBrowserHistory, createMemoryHistory } from "history";
import { Urls } from "../types/urls";

const isTest = process.env.NODE_ENV === "test";

export const history = isTest
  ? createMemoryHistory({ initialEntries: ['/'] })
  : createBrowserHistory();

Don't like this solution for the same reason

3. Creating a custom history

jest.mock('react-router-dom', () => ({
  useHistory: () => ({
    push: jest.fn(),
  }),
}));

As far as I understand MemoryHistory is there for scenarios like testing, so creating a own mock object should be unneccessary.

Maybe my approach is wrong but I don't know how else I could test a component like this.

You certainly don't need to modify the component. You control the history by mounting your component in a router context, see e.g. https://testing-library.com/docs/example-react-router/, https://reactrouter.com/web/guides/testing. Here's one example I posted recently: https://stackoverflow.com/a/65275037/3001761 — jonrsharpe, Jan 11 '21 at 22:11
@jonrsharpe thanks that worked. Also I had to change the reference of my component from `import {NotFound} from "../index";` to `import NotFound from "./NotFound";` — horotab, Jan 12 '21 at 18:05

score 0 · Accepted Answer · answered Jan 12 '21 at 18:04

The answer was in the answer that jonrsharpe has linked (stackoverflow.com/a/65275037/3001761)

My code looks now like this.

import React from "react";
import {createMemoryHistory} from "history";
import {Router} from "react-router";
import {fireEvent, render, screen} from "@testing-library/react";
import NotFound from "./NotFound";

describe("NotFound", () => {
    it('test the not found page', () => {
        const history = createMemoryHistory({ initialEntries: ['/page1', '/page2'] });
        render(
            <Router history={history}>
                <NotFound />
            </Router>
        );
        fireEvent.click(screen.getByText("Ok"));
        expect(history.length).toBe(2);
        expect(history.location.pathname).toBe("/home");
        expect(history.entries[1].pathname).toBe("/page2");
    });
});

react typescript test history without modify the Component

1 Answers1