Когда дело доходит до фреймворков модульного тестирования для JavaScript, Jest, безусловно, является серьезным претендентом на первое место.

Изначально Jest создавался Facebook специально для тестирования React-приложений. Использование простого Jest в кодовой базе TypeScript имеет шероховатости.

Если вам нужно провести модульное тестирование кода TypeScript, вы попали по адресу.

Давайте начнем!

"Начальная настройка"

Для первоначальной настройки мы можем использовать документацию ts-jest: https://github.com/kulshekhar/ts-jest

yarn add -D jest typescript ts-jest @types/jest
yarn ts-jest config:init

Это устанавливает jest и ts-jest, TypeScript (если у вас его еще нет) и определения типов для jest, чтобы TypeScript знал, что доступно.

config:init дает вам файл конфигурации по умолчанию, подобный этому:

// jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
 preset: "ts-jest",
 testEnvironment: "node",
}

По умолчанию jest использует node testEnvironment. По сути, это делает любые тесты, предназначенные для среды браузера, недействительными.

jsdom — это реализация среды браузера, которая поддерживает эти типы тестов пользовательского интерфейса.

Для Jest версии 28 и выше jest-environment-jsdom был удален из установки jest по умолчанию, чтобы уменьшить размер пакета, поэтому, если вы используете jest 28, вам нужно будет установить jest-environment-jsdom отдельно:

yarn add -D jest-environment-jsdom

Теперь вы можете обновить testEnvironment в jest.config.js:

// jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
 preset: "ts-jest",
 testEnvironment: "jest-environment-jsdom"
}

Поскольку приложение, над которым я работаю, использует файлы JS и JSX, нам нужно указать jest использовать babel-jest для этих файлов:

// jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
 preset: "ts-jest",
 testEnvironment: "jest-environment-jsdom",
 transform: {
  '^.+\\.ts?$': 'ts-jest',
  '^.+\\.tsx?$': 'ts-jest',
  '^.+\\.js?$': 'babel-jest',
  '^.+\\.jsx?$': 'babel-jest',
  '^.+\\.scss$": 'jest-scss-transform'
 }
}

Сделайте тесты работоспособными

Если у вас его еще нет, добавьте этот раздел в свой package.json:

{
 "scripts": {
  "test": "jest"
 }
}

Настроить TypeScript

Если вы еще этого не сделали, вам нужно настроить TypeScript, но если приложение, над которым вы работаете, уже имеет файл tsconfig.json, вы можете игнорировать эту настройку:

// tsconfig.json
{
 "compileOnSave": true,
 "compilerOptions": {
   "target": "es2017",
   "allowJs": true,
   "skipLibCheck": true,
   "esModuleInterop": true,
   "allowSyntheticDefaultImports": true,
   "strict": true,
   "forceConsistentCasingInFileNames": true,
   "module": "commonjs",
   "moduleResolution": "node",
   "resolveJsonModule": true,
   "isolatedModules": true,
 },
 "include": ["."]
}

Напиши тест

Написать тест с jest действительно легко, я начал писать почти сразу. Поместите глупую функцию в src/silly.ts:

export function sillyFunction() {
  return true
}

И тест этой функции в src/test/silly.test.ts:

import { sillyFunction } from "../silly"
describe("silly function", () => {
 test("returns true", () => {
 expect(sillyFunction()).toEqual(true)
 })
})

Запустите yarn test, и вы получите успешный тестовый прогон:

Удачных испытаний ❤️