如何使用Jest/React测试Router.push

// MyComponent.js
import React from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
    const history = useHistory();

    const handleClick = () => {
        history.push('/new-route');
    };

    return (
        <div>
            <button onClick={handleClick}>Go to New Route</button>
        </div>
    );
};

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('navigates to new route on button click', () => {
    const { getByText } = render(
        <MemoryRouter>
            <MyComponent />
        </MemoryRouter>
    );

    // 获取按钮并触发点击事件
    const button = getByText('Go to New Route');
    fireEvent.click(button);

    // 验证 history.push 被调用
    // 由于我们没有直接访问 history 对象，我们可以通过模拟 history 对象来验证
    // 这里我们可以使用 jest.fn() 来模拟 history.push
    const history = {
        push: jest.fn(),
    };

    // 重新渲染组件并传入模拟的 history
    const { getByText: getByTextWithHistory } = render(
        <MemoryRouter>
            <MyComponent history={history} />
        </MemoryRouter>
    );

    fireEvent.click(getByTextWithHistory('Go to New Route'));

    // 验证 history.push 被调用
    expect(history.push).toHaveBeenCalledWith('/new-route');
});