Когда дело доходит до фреймворков модульного тестирования для 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
, и вы получите успешный тестовый прогон:
Удачных испытаний ❤️