Анастасия Бакута

Эта статья продолжает предыдущую «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);    ...

Серверные и клиентские компоненты в nextjs Прежде, чем писать e2e тесты, давайте разберемся с nextjs и теми особенностями, которые он дает, а именно — что такое серверные и клиентские компоненты. Раньше у нас был только клиентский js, и отдельно код, который запускается на сервере. Nextjs перевернул мир фронтэнда, совместив эти две концепции в один, сделав переход для разработчика от одних компонент к другим практически бесшовным. Вся разница заключается в указании «use client» в файлах, которые должны выполняться на клиенте. И это может создать путаницу, если не понимать принцип как работают оба вида компонент. Изначально все компоненты считаются серверными и рендерятся на сервере, они имеют как преимущества, так и ряд ограничений. Например, они могут напрямую обращаться к данным, а также env-переменным и токенам доступа. Но с другой стороны не могут выполнять хуки или производить интеративные клиентские события, у них нет доступа к браузерному API. Как проверить где выполяется компо...