Асинхронные тесты и MSW: мокайте сеть, а не fetch

findBy и waitFor: опрос, а не сон

Через десять минут вы будете точно знать, почему CI-джоба из Hook повисла, почему проверка спиннера была гонкой и — самое важное — почему retry: 2 скрыл бы все три инцидента. У каждой проблемы однострочный диагноз; он работает только если понимаешь модель.

findByRole(...) — это буквально getByRole, завёрнутый в waitFor: запрос перезапускается каждые 50 мс, пока не выполнится или пока не сгорит бюджет в 1 000 мс, и возвращает промис. Это весь асинхронный инструментарий для «данные появились»: await screen.findByRole("row", { name: /order #1042/i }) выражает «пользователь в конце концов это видит» без сна, без произвольной задержки и с точным падением (таймаут с последней ошибкой запроса, а не безликий промах проверки). Обе ручки — честная конфигурация, а не магия: на вызов — findByRole("row", {}, { timeout: 3000 }) — или на весь сьют через configure({ asyncUtilTimeout }), когда раннеры CI действительно медленнее ноутбуков. А они медленнее: расшаренный раннер с 2 vCPU под параллельными воркерами стабильно тратит на рендер в 5–10 раз больше, чем dev-машина, и ровно этот множитель превращает комфортные 90 мс в пробитие односекундного бюджета на 1,3 с.

У самого waitFor три правила, предотвращающие инциденты из Hook. Одна проверка на колбэк — waitFor ретраит, пока колбэк не перестанет бросать, поэтому колбэк с пятью ожиданиями сообщает о падении того, что выполнилось последним, а первые четыре перевыполняются на каждом опросе. Никаких побочных эффектов внутри колбэка — fireEvent или user.click внутри waitFor перестреливает на каждом 50-мс ретрае; именно так форма из Hook отправилась четыре раза и спрятала баг дедупликации. Никогда не пустой — await waitFor(() => {}) это сон с лишними движениями: он ждёт ровно один тик и ничего не проверяет, замазывая порядок, который вы не поняли. Чтобы проверить, что элемент исчез, инвертируйте: await waitForElementToBeRemoved(() => screen.queryByRole("status")) — заметьте queryBy, вариант, возвращающий null вместо исключения: правильный зонд для отсутствия.

У проверки состояния загрузки своя ловушка: после await user.click(submit) ответ может уже приземлиться — мок-серверы отвечают в микротасках. Проверяйте спиннер синхронно сразу после действия, запускающего запрос, через getByRole("status") (он обязан быть на месте немедленно, если компонент рендерит его немедленно), либо добавьте хендлеру явную задержку, когда промежуточное состояние и есть предмет теста.

MSW 2.x: мокайте шов, который не двигается

Спросите себя: когда команда мигрирует на react-query в следующем квартале, сколько тестов сломается? Если ответ зависит от выбранной стратегии мока — вы выбрали не тот шов.

Мок fetch привязывает тест к транспортной функции. В день, когда команда мигрирует с голого fetch на axios или заворачивает доступ к данным в react-query, каждый тест с vi.spyOn(global, "fetch") ломается — не потому, что поведение изменилось, а потому, что шов переехал. MSW (Mock Service Worker — библиотека перехвата запросов на уровне сети) перехватывает на сетевой границе: хендлеры описывают HTTP-трафик — метод, путь, ответ, — а компонент под тестом выполняет свой настоящий код загрузки данных, каким бы он ни был в этом квартале. Рефакторинг с fetch на axios и далее на react-query меняет ноль тестов — свойство, делающее сьют на 1 000 тестов жизнеспособным.

// хендлеры, общие для тестов и Storybook
import { http, HttpResponse } from "msw";
import { setupServer } from "msw/node";

export const server = setupServer(
  http.get("/api/orders", () =>
    HttpResponse.json([{ id: 1042, status: "shipped" }]),
  ),
);

// файл настройки тестов
beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Три несущие детали. onUnhandledRequest: "error" превращает каждый запрос, который вы забыли замокать, в громкое падение вместо тихого зависания, которое потом всплывёт таймаутом waitFor, — лучший выключатель флейков во всём стеке. server.resetHandlers() в afterEach сбрасывает пер-тестовые оверрайды, чтобы чей-то 500 не протёк в следующий тест — пропуск этой строки входит в тройку главных источников падений, зависящих от порядка. А server.use(...) подставляет хендлеры только для текущего теста:

it("показывает error boundary на 500", async () => {
  server.use(http.get("/api/orders", () =>
    new HttpResponse(null, { status: 500 }),
  ));
  render(<Orders />);
  expect(await screen.findByRole("alert")).toHaveTextContent(/could not load/i);
});

it("отличает сетевой сбой от 500", async () => {
  server.use(http.get("/api/orders", () => HttpResponse.error()));
  render(<Orders />);
  expect(await screen.findByRole("alert")).toHaveTextContent(/offline/i);
});

Эта пара — дисциплина состояний ошибок: 500 и сетевой сбой (HttpResponse.error()) — разные пользовательские переживания: «сервер отказал» против «сервер недостижим», и компонент, схлопывающий их в одно сообщение, — настоящая находка, видимая только потому, что шов позволяет выразить оба случая.

Зелёное локально, красное в CI: постмортем таймингов

Прогоните три инцидента из Hook через правила — и каждый разрешается. Рендер за 1,3 с, пробивающий бюджет в 1 с, — не флейки, а корректный тест с неверным бюджетом для среды; поднимите asyncUtilTimeout осознанно для железа класса CI, не сыпьте слипы. Проверка спиннера, гоняющаяся с собственным исчезновением, — баг порядка в тесте: промежуточные состояния проверяются синхронно в момент, когда они обязаны существовать, либо делаются детерминированными хендлером с задержкой. Клик внутри waitFor — единственный настоящий дефект, и он спрятал продакшен-баг; отсюда общий урок: большинство «флейков в асинхронных тестах» — это тесты с неверной моделью времени, и лечение никогда не retry: 2. Полезная эвристика аудита унаследованного сьюта, по порядку: grep по колбэкам waitFor длиннее одного выражения; grep по любому диспатчу события внутри waitFor; grep по setTimeout/sleep в тестах; затем проверка, что onUnhandledRequest стоит в error. Эти четыре grep нашли 31 латентный флейк в 600-тестовом сьюте из Hook за один вечер.