Comment utiliser la bibliothèque de test jest-dom avec la nouvelle version React V6 ?

Question

Je suis en train de développer mon application React et quand j'ai essayé de faire des tests unitaires en utilisant la bibliothèque react testing. Je n'arrive pas à exécuter mes tests avec succès.

Quelqu'un sait-il si cela est lié à la mise à jour de la V6 React ?

Voici mon exemple de code de test que j'essaie d'exécuter :

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders a button to enter', () => {
  render(<App />);
  const linkElement = screen.getByText(/Play/i);
  expect(linkElement).toBeInTheDocument();
});

App.js

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<LandingPage />} />
        <Route exact path="/home" element={<Home />} />
        <Route exact path="/videogame/:id" element={<Detail />} />
        <Route exact path="/creategame" element={<CreateGame />} />
      </Routes>
    </div>
  );
}

export default App;

Page d'atterrissage

const LandingPage = () => {
  return (
    <div className="landing">
      <Link to="/home">
        <button className="landingBtn">Play</button>
      </Link>
    </div>
  );
};

export default LandingPage;

Merci de votre attention !

Answer 1

Puisque vous testez App et il s'agit d'itinéraires que vous ne pouvez pas sélectionner /Play/i ici au lieu d'importer le composant exact à tester.

react-testing-library avec react router

Pour tester les fichiers de routeurs

Le routeur fictif est un div et contient le code de ses enfants. Cela fonctionne de la manière suivante : Vous avez besoin du dossier __mocks__/react-router-dom.js qui contient le code suivant :

import React from 'react';

const reactRouterDom = require("react-router-dom")
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>
module.exports = reactRouterDom

Vous pouvez maintenant utiliser le MemoryRouter pour définir le chemin vers lequel la route doit pointer.

App.test.js :

import React from "react";
import { render } from "@testing-library/react";
import { MemoryRouter } from 'react-router-dom';
import App from './App';

describe("unit-test", () => {
    it("renders the right component with following path '/home'", () => {
        const { getByTestId } = render(
            <MemoryRouter initialEntries={['/home']}>
                <App></App>
            </MemoryRouter>
        )

        let HomeComponent= getByTestId("home-component")

        expect(HomeComponent).toBeInTheDocument()
    })
})