Загрузка next page tester - Скачать исходный код next page tester

next page tester

AI Исходный код

1.0.0

Скачать

Тестер следующей страницы (устаревший)

Этот проект устарел

Следующая. Следующая страница, содействующие тестированию, предлагают использовать тестирование браузера, вместо этого.

Вступление

Инструмент пропущенного интеграции DOM для следующего.js.

Учитывая маршрут Next.js, эта библиотека будет отображать подходящую страницу в JSDOM , предоставленную с ожидаемыми реквизитами , полученными из системы маршрутизации Next.js и методов извлечения данных .

 import { getPage } from 'next-page-tester' ;
import { screen , fireEvent } from '@testing-library/react' ;

describe ( 'Blog page' , ( ) => {
  it ( 'renders blog page' , async ( ) => {
    const { render } = await getPage ( {
      route : '/blog/1' ,
    } ) ;

    render ( ) ;
    expect ( screen . getByText ( 'Blog' ) ) . toBeInTheDocument ( ) ;

    fireEvent . click ( screen . getByText ( 'Link' ) ) ;
    await screen . findByText ( 'Linked page' ) ;
  } ) ;
} ) ;

Что

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

Чтобы обеспечить ценный опыт тестирования next-page-tester переписывает поток рендеринга фактического приложения next.js :

получить данные для данного маршрута
рендеринг на стороне сервера результат JSDOM как простой HTML (включая элемент head )
Установка/увлажняет клиентское применение к ранее отображаемому HTML

Монтажное приложение является интерактивным и может быть протестировано с любой библиотекой тестирования DOM (например, @testing-library/react ).

next-page-tester позаботятся:

Загрузка и выполнение модулей в ожидаемых средах браузера или сервера
разрешение предоставленных маршрутов в компонент соответствующей страницы
Вызовы следующие методы извлечения данных ( getServerSideProps , getInitialProps или getStaticProps ), если случай
Страница обертки с пользовательскими компонентами _app и _document
эмуляция навигации по стороне клиента через Link , router.push , router.replace
обработка страниц ' redirect возврата
Поддержка next/router , next/head , next/link , next/config и среда переменных

API

GetPage

getPage принимает объект опции и возвращает 4 значения:

 import { getPage } from 'next-page-tester' ;

const { render , serverRender , serverRenderToString , page } = await getPage ( {
  options ,
} ) ;

оказывать()

Тип: () => { nextRoot: HTMLElement<NextRoot> }
Возвращает: #__next root Element Element.

Если у вас нет расширенного использования, вы должны в основном использовать этот метод. Под капюшоном он вызывает serverRender() , а затем монтирует/увлажняет приложение React в корневой элемент jsdom #__next . Это то, что пользователи получат/увидят, когда они посещают страницу.

ServerRender ()

Тип: () => { nextRoot: HTMLElement<NextRoot> }
Возвращает: #__next root Element Element.

Введите вывод рендеринга на стороне сервера в DOM, но не установите React. Используйте его, чтобы проверить, как Next.js рендерирует в следующих сценариях:

Прежде чем реагировать на крепления
Когда JS отключен
SEO -тесты

ServerRenderToString ()

Тип: () => { html: string }

Рендерные выводы рендеринга на стороне сервера в виде строки HTML. Это чистый метод без побочных эффектов.

страница

Тип: React.ReactElement<AppElement>

Реагировать элемент приложения.

Параметры

Свойство	Описание	тип	По умолчанию
маршрут (обязательный)	Следующий маршрут (должен начать с `/` )	`string`	-
req	Улучшить свойственный объект запроса по умолчанию	`req => req`	-
резерв	Улучшить смешинный объект ответа по умолчанию	`res => res`	-
маршрутизатор	Улучшитьте по умолчанию смешивается следующим объектом маршрутизатора	`router => router`	-
Useapp	Рендеринг настраиваемого компонента приложения	`boolean`	`true`
~~Используемый~~ (Экспериментальный. Временно отключен из -за этой проблемы)	Рендеринг компонент документа	`boolean`	`false`
Nextroot	Абсолютный путь к корневой папке next.js	`string`	Авто обнаружен
dotenvfile	Относительный путь к переменным среды `.env`	`string`	-
обертки	Абсолютный путь к файлу оберток. Полезно для украшения дерева компонентов с высмеиваемыми поставщиками.	`string`	-
Sharedmodules	Список модулей, которые должны сохранить идентичность между контекстом клиента и сервера.	`string[]`	[]

Настройка вашей среды разработки

Обработка специального импорта

Если ваши страницы/компоненты импортируют типы файлов, которые не обращаются в Node.js (например, листы стиля, изображения, .svg , ...), вы должны настроить свою среду тестирования для правильного обработки их. Например, в случае шутки вы можете настройка некоторых moduleNameMapper .

Установка среда JSDOM

next-page-tester рассчитывает столкнуться с средой JSDOM. Если использование Jest добавьте эту строку в вашу настройку jest :

 "testEnvironment" : "jsdom" ,

Пропустить автоматическую очистку и инициализацию помощников

Поскольку Next.js не предназначен для работы в среде JSDOM, нам нужно настроить JSDO по умолчанию, чтобы обеспечить более плавный опыт тестирования. По умолчанию, next-page-tester Will:

Предоставьте window.scrollTo и IntersectionObserver Mocks recsectionObserver
Очистка DOM после каждого теста
Настройка Jest для сохранения идентификации некоторых конкретных модулей между «сервером» и «клиентским» выполнением

Тем не менее, вы можете пропустить инициализацию Auto Cleanup & Helpers, установив переменную env NPT_SKIP_AUTO_SETUP для true . Вы можете сделать это с cross-env как SO:

 cross - env NPT_SKIP_AUTO_SETUP = true jest

Необязательно: исправление Jest v26

При использовании Jest V26 вам может потребоваться исправить его для загрузки модулей с помощью соответствующих средств сервера/клиентов. Усилия по техническому обслуживанию будут нацелены на последнюю версию Jest.

Примеры

В папке «Примеры мы документируем случаи тестирования», которые позволяет next-page-tester .

Следующая поддержка версий

next-page-tester фокусируется на поддержке только последней версии Next.js и Jest:

Следующая страница	Next.js	Шутка
V0.1.0 -> v0.7.0	v9.xx	v26.xx
v0.8.0 -> v0.22.0	V10.0.0 -> V10.0.7
v0.23.0 -> v0.25.x	V10.0.8 -> v11.0.x
v0.26.0 -> v0.27.x	V10.0.8 -> v11.0.x	v27.xx
v0.28.0 -> v0.28.x	v11.1.0
v0.29.0 +	v11.1.1 -> v11.x
v0.31.0 +	v12.1.0
v0.32.0 +	v12.1.1 +

С:

Этот проект не поддерживается командой Next.js
Этот проект опирается на несколько внутренних.

Обратите внимание, что мы не можем гарантировать поддержку для будущих версий Next.js Out из коробки. Даже патч или второстепенные версии могут сломаться. В этом случае вам придется дождаться выпуска новой версии next-page-tester .

Взносы очень приветствуются, и мы делаем все возможное, чтобы поддержать внешних участников.

Примечания

res req методов извлечения данных
Тестер следующей страницы предназначен для использования с любой структурой тестирования/библиотеки, но в настоящее время он тестируется только с помощью Jest и Testing Library. Не стесняйтесь открывать проблему, если у вас были проблемы с разными настройками
Возможно, необходимо установить @types/react-dom и @types/webpack при использовании TypeScript в strict режиме из-за этой ошибки

Экспериментальный вариант `useDocument`

Опция useDocument частично реализована и может быть нестабильной.

Часто задаваемые вопросы

Как издеваться над вызовами API в моих методах извлечения данных?

Первый предложенный способ издеваться над запросами сети, состоит из насмешек на сетевом уровне с такими библиотеками, как Mock service worker и Mirage JS .

Другой жизнеспособный подход может состоять из насмешки глобального объекта fetch с такими библиотеками, как fetch-mock .

Если вы хотите более традиционный подход, включающий издеваренные модули земельных назем пользователей, отвечающие за получение данных, вам необходимо рассмотреть дополнительный шаг: поскольку изолятные модули next-page-tester между «клиентом» и «сервер», те марок, которые создаются в тестах (клиент-контекст), не будут выполняться в контексте сервера (например, методы извлечения данных).

Чтобы преодолеть это, нам нужно «портить» такие модули, чтобы (сохранить/делиться) их идентичность между «клиентом» и контекстом «сервера», передавая их через опцию sharedModules .

 test ( 'as a user I want to mock a module in client & server environment' , async ( ) => {
  const stub = jest . spyOn ( api , 'getData' ) . mockReturnValue ( Promise . resolve ( 'data' ) )

  const { render } = await getPage ( {
    route : '/page' ,
    nextRoot ,
    sharedModules : [ ` ${ process . cwd ( ) } /src/path/to/my/module` ] ,
  } ) ;

  expect ( stub ) . toHaveBeenCalledTimes ( 1 ) ; // this was executed in your data fetching method
}

Как сделать файлы cookie доступными в методах извлечения данных next.js?

Вы можете установить файлы cookie, добавив их в document.cookie , прежде чем звонить getPage . next-page-tester будет распространять файлы cookie на ctx.req.headers.cookie , чтобы они были доступны для методов извлечения данных. Это также относится к последующим методам извлечения вызовов, запускаемых навигацией на стороне клиента.

 test ( 'authenticated page' , async ( ) => {
  document . cookie = 'SessionId=super=secret' ;
  document . cookie = 'SomeOtherCookie=SomeOtherValue' ;

  const { render } = await getPage ( {
    route : '/authenticated' ,
  } ) ;
  render ( ) ;
} ) ;

Примечание. document.cookie не очищается автоматически. Вам придется очистить его вручную после каждого теста, чтобы все в изоляции.

Ошибка: не реализована: window.scrollto

Next.js Link компонент вызывает window.scrollTo на клике, который не реализован в среде JSDOM. Чтобы исправить ошибку, вы должны настроить тестовую среду или предоставить свое собственное window.scrollTo Scrollto Mock.

Предупреждение: текстовый контент не совпадал. Сервер: «X» Клиент: «Y» ошибка

Это предупреждение означает, что ваша страница видит по -разному между сервером и браузером. Это может быть ожидаемое поведение или сигнализировать об ошибке в вашем коде.

Ошибка: referenceerror: Fetch не определено

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

Тодо

Рассмотрим повторное использование следующих частей кода (не только типы)
Рассмотрите возможность поддержки trailingSlash
Рендеринг настраиваемой страницу _error
Предоставьте вариант debug для регистрации информации о выполнении

Участники

Спасибо этим замечательным людям (ключ эмодзи):

_{Андреа Карраро} ? ️ ?	_{Матеж Шнудерл} ? ️ ? ?	_{Джейсон Уильямс} ?	_{Арелаксенд} ?	_Kfazinic ?	_{Томаш Рондио} ?	_{Александр Мендес}
_{Ян. Сепке} ?	_{Даворчард} ?	_{Доаа Исмаэль} ?	_{Эндрю Херл} ?	_{Массимедду-Сонник} ?	_{Джесс Телфорд} ?	_Джозеф ?
_{Герго Толнеи} ?	_Бретт ?	_{Влад Элагин}	_{Даниэль Стокман}	_Мейдуз	_{Доктор Дерек Остин} ?	_Feargal ?
_{Ян Р. Биаси} ?	_{Отавио Аугусто Соарс} ?