J'ai ajouté un test unitaire au menu pour vérifier que le logo est présent.
J'ai ajouté aria-label dans mon composant logo
constLogo = ({ size }) => (
<divclassName="Logo"aria-label="Logo">import { fireEvent, render, screen } from "@testing-library/react";
import Menu from "./index";
describe("When Menu is created", () => {
it("a list of mandatories links and the logo are displayed", async () => {
render(<Menu />);
await screen.findByText("Nos services");
await screen.findByText("Nos réalisations");
await screen.findByText("Notre équipe");
await screen.findByText("Contact");
});
describe("and a click is triggered on contact button", () => {
it("document location href changes", async () => {
render(<Menu />);
fireEvent(
await screen.findByText("Contact"),
new MouseEvent("click", {
cancelable: true,
bubbles: true,
})
);
expect(window.document.location.hash).toEqual("#contact");
});
});
describe("and a logo is created", () => {
it("logo is visible", () => {
render(<Menu />);
const logo = screen.getByLabelText("Logo");
expect(logo).toBeInTheDocument();
});
});
});
Pour expliquer :
Jest est un framework de test JavaScript.
Il est installé avec node-modules.
Le nommage du fichier
Pour que Jest reconnaisse vos fichiers de tests, on ajoute .test à la création de votre fichier.
Décomposition d'un fichier test
Je commence par importer le code du fichier .
describe permet de créer un bloc de tests (ou “Test Suite”, en anglais) et permet de renseigner le type de test que vous réalisez.
it contient le message indiquant le résultat attendu.
expect() va vous permettre d'exécuter la fonction et de stocker la valeur de retour de cette dernière.
toBeDefined() ou toEqual() est le test en lui-même.
C’est ce qu’on appelle le “matcher” côté test.
Autrement dit, Jest va tester si le résultat de expect() correspond au “matcher”.
Le matcher
Le principe d’un matcher est de comparer le résultat retourné par la fonction testée avec le résultat attendu.
Exemple de matcher : toBe - toBeDefined - toBeNan - toContain - toEqual