react typescript测试历史记录，而不修改组件

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:[...]srcPagesNotFoundNotFound.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适用于测试等场景，因此创建自己的mock对象应该是不必要的。

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

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