编写测试以证明 react-router 的位置

Question

我对为 React 编写测试的世界还很陌生，所以请原谅可能的新手问题。 我已经进行了大量的研究，但还没有找到任何涵盖这一点的东西。

我有一个非常简单的BackButton组件，它所做的只是渲染一个按钮并有一个可以追溯到历史的 onClick 事件。 如果有帮助，它使用react-router v6。

import * as React from 'react';
import Stack from '@mui/material/Stack';
import { ArrowCircleLeftOutlined } from '@mui/icons-material';
import { Link, useNavigate } from 'react-router-dom';

export default function BackButton() {
    const navigate = useNavigate();
    return (
        <Stack direction="row" spacing={1}>
            <Link onClick={() => navigate(-1)} aria-label="back" data-testid="backButton">
                <ArrowCircleLeftOutlined />
            </Link>
        </Stack>
    );
}

我已经使用测试库为此编写了一个测试，但似乎无法找到一种方法来查看位置更改为什么。 window.location.href只返回http://localhost

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

it('has a href that refers to the previous page', () => {
    const initialLink = "/foo";

    render(
        <MemoryRouter initialEntries={[initialLink]}>
            <BackButton />
        </MemoryRouter>
    );

    const element = screen.getByTestId('backButton');
    expect(element.getAttribute('href')).toBe(initialLink);
    fireEvent.click(element);
    // How do I test the location changed?
})

Answer 1

在被指向 mocking useNavigate的方向后（感谢@DrewReece），我可以查看调用了多少次以及如何useNavigate 。 我最终完成的测试如下。 我仍然必须使用react-testing-library以便我可以在屏幕上触发事件，但如果这不是最好的方法，我非常愿意学习。

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

const mockedUseNavigate = jest.fn();

jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockedUseNavigate,
}));

it('navigates to previous page on click', () => {
    render(<MemoryRouter><BackButton /></MemoryRouter>);

    const element = screen.getByTestId('backButton');
    fireEvent.click(element);

    expect(mockedUseNavigate).toBeCalledTimes(1);
    expect(mockedUseNavigate).toBeCalledWith(-1);
})

Answer 2

react-router 的位置

从“react-router-dom”导入 { useLocation }

const location = useLocation() console.log(location.pathname)