En lugar de burlarse de useParams , puede usar <MemoryRouter initialEntries> , por ejemplo:

MyComponent.js

 import { useParams } from "react-router-dom"; function MyComponent() { const { language } = useParams(); return ( <div> <h2>My Component page</h2> <p>language: {language}</p> </div> ); }

MyComponent.test.js

 import { MemoryRouter } from "react-router-dom"; import { render, screen, fireEvent } from "@testing-library/react"; import "@testing-library/jest-dom"; import App from "./App"; test("Home: Go to `MyComponent: en`", async () => { render( <MemoryRouter initialEntries={["/"]}> <App /> </MemoryRouter> ); expect(screen.getByText("Home page")).toBeInTheDocument(); fireEvent.click(screen.getByText("My Component: en")); expect(screen.getByText("language: en")).toBeInTheDocument(); expect(screen.queryByText("language: fr")).not.toBeInTheDocument(); }); test("MyComponent: en", async () => { render( <MemoryRouter initialEntries={["/myComponent/en"]}> <App /> </MemoryRouter> ); expect(screen.getByText("language: en")).toBeInTheDocument(); }); test("MyComponent: fr", async () => { render( <MemoryRouter initialEntries={["/myComponent/fr"]}> <App /> </MemoryRouter> ); expect(screen.getByText("language: fr")).toBeInTheDocument(); });

demostración en línea

Basado en esta página en los documentos de Jest, intente lo siguiente

 // create a separate mock function that you can access from tests // NOTE: the name must start with `mock` and is case sensitive const mockUseParams = jest.fn().mockReturnValue({ language: 'IT', }); // mock the module using the mock function created above jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useParams: mockUseParams, })); it('should behave differently when the params change', () => { mockUseParams.mockReturnValueOnce({ language: 'EN', }); // test implementation });

sí Incluya el enrutador en el componente de su aplicación; Siempre represente el componente de la aplicación en sus pruebas (nunca componentes secundarios como Ubicaciones); Navegue a sus páginas en las pruebas buscando y haciendo clic en los enlaces de la página Los aspectos positivos de este enfoque: no necesita leer el resto de esta publicación 🙃 (y la configuración de su prueba será menos complicada). Los aspectos negativos: no puede cargar inmediatamente un historial de enrutamiento (la página actual y las páginas anteriores) en la configuración de prueba; necesita pasar por todas las interacciones del usuario para construir el historial.