Jest предоставляет несколько способов обработки асинхронного кода в тестах. Вот основные методы:

1. Использование async/await:

Этот метод позволяет писать асинхронный код в синхронном стиле, что упрощает чтение и понимание кода.

test("async test with async/await", async () => {
  const data = await fetchData();
  expect(data).toBe("peanut butter");
});

2. Использование ‘promise’ и .then():

Если ваш код возвращает промис, Jest будет ожидать его выполнения. Если промис отклоняется, тест автоматически завершается ошибкой.

test("async test with promises", () => {
  return fetchData().then((data) => {
    expect(data).toBe("peanut butter");
  });
});

3. Использование сопоставителей .resolves и .rejects:

Эти сопоставители позволяют тестировать разрешение или отклонение промисов без необходимости использовать синтаксис async/await.

test("async test with resolves", () => {
  return expect(fetchData()).resolves.toBe("peanut butter");
});

test("async test with rejects", () => {
  return expect(fetchData()).rejects.toThrow("error");
});

4. Использование функции обратного вызова done:

Эта функция передается в качестве аргумента в тестовую функцию. Вы можете вызвать эту функцию, когда ваш асинхронный код будет завершен, и Jest будет ждать ее вызова перед завершением теста.

test("async test with done", (done) => {
  fetchData().then((data) => {
    expect(data).toBe("peanut butter");
    done();
  });
});

5. Использование setTimeout:

Функция setTimeout может использоваться для приостановки выполнения теста на заданное время, что полезно для ожидания перед выполнением теста.

test("async test with setTimeout", (done) => {
  setTimeout(() => {
    expect(true).toBe(true);
    done();
  }, 1000);
});

6. Использование waitFor из React Testing Library:

Если вы тестируете React-компоненты, вы можете использовать waitFor для ожидания определенного состояния или события.

import { render, screen, waitFor } from "@testing-library/react";
import MyComponent from "./MyComponent";
 
test("async test with waitFor", async () => {
  render(<MyComponent />);
  await waitFor(() => expect(screen.getByText("Loaded")).toBeInTheDocument());
});

Назад