在不修改组件的情况下反应打字稿测试历史

Question

我有一个简单的NotFound.tsx，我想在第一次测试中介绍它。

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

现在我想使用 MemoryHistory 来检查它是否可以导航。我的NotFound.test.tsx：

没有记忆历史

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

这是行不通的，因为那时他实际上试图像看起来那样导航。

现在我试图模拟它：

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

这给了我一个错误： ReferenceError: C:\[...]src\Pages\NotFound\NotFound.test.tsx: The module factory of 'jest.mock()' is not allowed to reference any out-of-scope variables.

我已经看到的其他解决方案是：

1.以历史为论据。我不喜欢这种解决方案，因为我不想修改我的代码进行测试。

2。创建有点像历史工厂并使用 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();

出于同样的原因不喜欢这个解决方案

3.创建自定义历史记录

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

据我了解 MemoryHistory 可用于测试等场景，因此无需创建自己的模拟对象。

也许我的方法是错误的，但我不知道我还能如何测试这样的组件。

Answer 1

答案在 jonrsharpe 链接的答案中 (stackoverflow.com/a/65275037/3001761)

我的代码现在看起来像这样。

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