e2e тестирование nextsj приложения с playwright & msw. Продолжение

Эта статья продолжает предыдущую «e2e тестирование nextsj приложения с playwright & msw» , вернее поясняет почему мы приходим к варианту работы с отдельным сервером, тогда как можно замокать текущие запросы в текущем окружении.

Изначально не предполагалось использовать @mswjs/http-middleware библиотеку для запуска отдельного сервера, а слушать текущий сервер в тестовом окружении. Для этого добавим файл .env.test со следующим содержимым:

APP_ENV=test

А в главном лайауте app/layout.tsx будем использовать эту переменную окружения чтобы определить слушать ли сервер или нет:

import { server } from '@/mocks/server';

// only TEST ENV: run server.listen for e2e-testing
if (process.env.APP_ENV === 'test') {
    server.listen({
        onUnhandledRequest(request) {
            console.log('Unhandled %s %s', request.method, request.url);
        },
    });
}

Запуск тестов в этом случае будет с указанием переменной окружения, т.е.

npm run build

NODE_ENV=test next start

npx playwright test

Это «канонический» способ, который все рекомендуют.

К сожалению такой подход оказался нерабочим при использовании next-auth, который делает внутренние запросы к 8000 порту. Поскольку сервер у нас поднимается на том же 3000 порту, что и само приложение, и соответственно эти запросы возвращаются с ошибкой.

В случае же отдельного сервера с помощью @mswjs/http-middleware можно легко замокать все внутренние запросы. Бонусом идёт возможность запускать тестовый сервер с замоканными данными и для разработки, не только для тестов.

Комментарии

Популярные сообщения из этого блога

Стайлгайд и компонентная разработка

z-index

React Native: путь новичка