Блог

Главная - Вопросы по программированию - Возвращает массив из jest-макета с помощью React Hook

Возвращает массив из jest-макета с помощью React Hook

#reactjs #jestjs #react-hooks #react-testing-library

#reactjs #jestjs #реагирующие перехваты #react-testing-library

Вопрос:

Я пытаюсь создать макет для пользовательского хука, который использует useEffect и use / createContext и в конечном итоге просто возвращает что-то похожее на это:

 [{ users: 0, hoursTested: 0, testDrives: 0 }, null];

Мой код выглядит следующим образом:

 import React from "react";
import { render, screen } from "@testing-library/react";
import BetaResults from "./BetaResults";

var mockResults = [{ users: 0, hoursTested: 0, testDrives: 0 }, null];
jest.mock("services/EAPStats/useEAPStats", () => {
  console.log("In Mock");
  return jest.fn(() => {
    console.log("In jest.fn");
    console.log("mock results", mockResults);
    return mockResults;
  });
});
test("renders BetaResults", async () => {
  mockResults = [{ users: 10, hoursTested: 10, testDrives: 10 }, undefined];
  render(<BetaResults />);
  expect(screen.getAllByTestId("BetaResultsHeaderText").length).toEqual(1);
});

Когда я выполняю тест, я получаю эту ошибку:

 Error: Uncaught [TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))]

Выполнение никогда не достигает функции, определенной с помощью jest.fn . Что я упустил из виду?

Ответ №1:

В итоге я пошел другим путем и подумал, что опубликую то, что я сделал, для всех, кто борется с реализацией тестов вокруг реактивных перехватов и вызовов выборки. Вместо того, чтобы делать все эти издевательства, я просто использовал msw, и это намного чище. Ниже приведен код:

 import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import BetaResults from "./BetaResults";
import { rest } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
  rest.get("/api/EAPStats.json", (req, res, ctx) => {
    return res(ctx.json({ users: 10, hoursTested: 1000, testDrives: 100 }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
test("renders BetaResults", async () => {
  render(<BetaResults />);
  // Wait for the hook to fire and retrieve data. Initial render is loading component.
  await waitFor(() => screen.getByTestId("resultsBackground"));
  expect(screen.getByTestId("hoursTested").innerHTML).toEqual("1000");
  expect(screen.getByTestId("users").innerHTML).toEqual("10");
  expect(screen.getByTestId("testDrives").innerHTML).toEqual("100");
});

Довольно просто и легко понять, как расширить это.

Метки: