Tests d'exemple d'intégration GET non fonctionnel

[Lukylix]

Les 3 tests d'intégration GET ne fonctionnent pas (tests/Dashboard.js)

La logique semble pourtant bonne mais le contenu de la page reste sur le dernier test en cours. Donc l'html retourné par DashboardFormUI(bills[0]) du test précédant.

Après avoir ajouté un reset de celle-ci en début de test :

document.body.innerHTML = "";

On obtient l'html de la page d'erreur, avec comme message : "ReferenceError: fetch is not defined". Il semblerait que ces tests utilisent donc le store non mocké, et jsdom n'implémente pas fetch il me semble.

L'approche par l'utilisation de

window.onNavigate(ROUTES_PATH.Dashboard);

est donc problématique car on ne lui a pas spécifié notre store mocké.

J'espère être dans l'erreur et que ce problème m'est unique, merci de me tenir informé si c'est le cas.

Les tests en questions pour le contexte :

// test d'intégration GET
describe("Given I am a user connected as Admin", () => {
  describe("When I navigate to Dashboard", () => {
    test("fetches bills from mock API GET", async () => {
      localStorage.setItem("user", JSON.stringify({
        type: "Admin",
        email: "a@a"
      }));
      const root = document.createElement("div");
      root.setAttribute("id", "root");
      document.body.append(root);
      router();
      window.onNavigate(ROUTES_PATH.Dashboard);
      await waitFor(() => screen.getByText("Validations"));
      const contentPending = await screen.getByText("En attente (1)");
      expect(contentPending).toBeTruthy();
      const contentRefused = await screen.getByText("Refusé (2)");
      expect(contentRefused).toBeTruthy();
      expect(screen.getByTestId("big-billed-icon")).toBeTruthy();
    });
    describe("When an error occurs on API", () => {
      beforeEach(() => {
        jest.spyOn(mockStore, "bills");
        Object.defineProperty(window, "localStorage", {
          value: localStorageMock
        });
        window.localStorage.setItem(
          "user",
          JSON.stringify({
            type: "Admin",
            email: "a@a",
          })
        );
        const root = document.createElement("div");
        root.setAttribute("id", "root");
        document.body.appendChild(root);
        router();
      });
      test("fetches bills from an API and fails with 404 message error", async () => {
        mockStore.bills.mockImplementationOnce(() => {
          return {
            list: () => {
              return Promise.reject(new Error("Erreur 404"));
            },
          };
        });
        window.onNavigate(ROUTES_PATH.Dashboard);
        await new Promise(process.nextTick);
        const message = await screen.getByText(/Erreur 404/);
        expect(message).toBeTruthy();
      });

      test("fetches messages from an API and fails with 500 message error", async () => {
        mockStore.bills.mockImplementationOnce(() => {
          return {
            list: () => {
              return Promise.reject(new Error("Erreur 500"));
            },
          };
        });

        window.onNavigate(ROUTES_PATH.Dashboard);
        await new Promise(process.nextTick);
        const message = await screen.getByText(/Erreur 500/);
        expect(message).toBeTruthy();
      });
    });
  });
});

[Lukylix]

Je n'avais pas vu la ligne 16 :

jest.mock("../app/store", () => mockStore);

Il manque la majuscule à store pour que les tests soient fonctionnels Ligne corrigé :

jest.mock("../app/Store", () => mockStore);