NextJS настроен с Jest, Testing Library и Cypress

NextJS v13

Автоматизированное тестирование является обязательным условием для любого готового, надежного приложения. В этой статье мы собираемся настроить Jest, среду тестирования вместе с библиотекой тестирования реакции для модульного тестирования и Cypress для сквозного тестирования. тестирование приложения NextJS.

Шутка

Нам нужно установить следующий пакет для Jest

npm i jest jest-environment-jsdom --save-dev

Пакет jest-environment-jsdom имитирует среду DOM, чтобы можно было протестировать работу с DOM или функции, связанные с DOM API, с помощью Jest.

Нам также нужно создать файл jest.config.js.

// jest.config.js
const nextJest = require('next/jest')
 
// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir: './' })
 
// Any custom config you want to pass to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom'
}
 
// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async
module.exports = createJestConfig(customJestConfig)

NextJS предоставляет пакет (next/jest) для автоматической настройки Jest в проекте. Он автоматически имитирует css и игнорирует node_modules, .next folderи т. д. Мы также можем предоставить файл в setupFilesAfterEnv, который содержит код, который запускается после каждого теста. исполнение.

Библиотека тестирования React

Установите следующие пакеты

npm i @testing-library/react @testing-library/jest-dom --save-dev

Пакет @testing-library/jest-dom предоставляет настраиваемый сопоставитель jest для проверки состояния DOM.

Добавьте следующий код в jest.setup.js

// jest.setup.js
import '@testing-library/jest-dom/extend-expect'

Скрипты NPM

// package.json
"test": "jest --watch --coverage",
"test:ci": "jest --ci"

— флаг покрытия показывает общее покрытие кода на консоли.

— флаг ci используется, когда тестовые случаи выполняются в конвейере. Он не пройдет тест, если совпадение моментального снимка не удастся.

Кипарис

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

Установите cypress как зависимость от разработчиков

npm i cypress --save-dev

Добавьте следующий скрипт NPM

// package.json
"e2e": "cypress open"

Выполнить npm-скрипт

npm run e2e

Cypress обнаружит, что cypress находится в стадии установки, поэтому автоматически создаст cypress.config.js и добавит папку с именем cypress. Папка Cypress содержит несколько файлов.

Примечание. На данный момент NextJS v13 + Typescript не работает с Cypress из коробки. В репозитории Cypress есть открытая проблема. В качестве обходного пути необходимо добавить следующий код в файл tsconfig.json.

// tsconfig.json
{
  "compilerOptions": {
    ....
  },
  "ts-node": {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "Node"
    }
  },
}

Мы можем настроить Jest, React Testing Library (RTL) и Cypress в проекте NextJS, выполнив описанные выше шаги. .

Удачного кодирования!!!

NextJS настроен с Jest, Testing Library и Cypress