3.1 Настройка тестирования с нуля
Юнит-тестирование — это процесс проверки отдельных частей кода, таких как функции или классы, на корректность их работы. Jest — это фреймворк для тестирования, который широко используется в экосистеме JavaScript и TypeScript. Ниже вы изучите, как настроить Jest для работы с TypeScript и как писать эффективные юнит-тесты.
Настройка проекта
1. Создание проекта и установка зависимостей
Для начала создадим новый проект и установим необходимые зависимости:
mkdir my-jest-ts-app
cd my-jest-ts-app
npm init -y
npm install --save-dev jest ts-jest @types/jest typescript
2. Создание конфигурационного файла TypeScript
Создайте файл tsconfig.json в корне проекта:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": ["src"],
"exclude": ["node_modules"]
}
3. Создание конфигурационного файла Jest
Создайте файл jest.config.js в корне проекта:
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
};
4. Добавление скрипта для запуска тестов в package.json
Добавьте следующий скрипт в package.json:
"scripts": {
"test": "jest"
}
5. Создание структуры проекта
Создайте папку src для исходного кода и папку tests для тестов:
mkdir src
mkdir tests
3.2 Написание первых юнит-тестов
1. Пример простой функции и ее теста
Создадим простую функцию sum в файле src/sum.ts:
export function sum(a: number, b: number): number {
return a + b;
}
Теперь напишем юнит-тест для этой функции в файле tests/sum.test.ts:
import { sum } from '../src/sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
test('adds -1 + 1 to equal 0', () => {
expect(sum(-1, 1)).toBe(0);
});
Запустите тесты командой:
npm test
Jest выполнит тесты и выведет результаты в консоли.
2. Тестирование асинхронных функций
Рассмотрим пример асинхронной функции и ее тестирования. Создадим функцию fetchData в файле src/async.ts:
export async function fetchData(): Promise<string> {
return new Promise((resolve) => {
setTimeout(() => {
resolve('peanut butter');
}, 1000);
});
}
Теперь напишем юнит-тест для этой функции в файле tests/async.test.ts:
import { fetchData } from '../src/async';
test('the data is peanut butter', async () => {
const data = await fetchData();
expect(data).toBe('peanut butter');
});
Запустите тесты командой:
npm test
Jest выполнит асинхронный тест и выведет результаты в консоли.
3. Тестирование исключений
Создадим функцию, которая выбрасывает исключение в определенных условиях, в файле src/error.ts:
export function compileCode(code: string): void {
if (code === 'throw') {
throw new Error('you used a forbidden code');
}
}
Теперь напишем тест для проверки, что функция корректно выбрасывает исключение, в файле tests/error.test.ts:
import { compileCode } from '../src/error';
test('throws an error when the code is "throw"', () => {
expect(() => compileCode('throw')).toThrow('you used a forbidden code');
});
Запустите тесты командой:
npm test
Jest выполнит тесты и выведет результаты в консоли.
3.3 Организация тестов
Организация тестов помогает поддерживать их в порядке и делает код более читаемым. Используйте следующие рекомендации:
1. Группировка тестов с помощью describe
Jest позволяет группировать тесты с помощью функции describe, что делает их более организованными.
import { sum } from '../src/sum';
describe('sum function', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
test('adds -1 + 1 to equal 0', () => {
expect(sum(-1, 1)).toBe(0);
});
});
2. Фикстуры с beforeEach и afterEach
Используйте beforeEach и afterEach для выполнения кода до и после каждого теста, например, для настройки и очистки окружения.
let data: number[];
beforeEach(() => {
data = [1, 2, 3];
});
afterEach(() => {
data = [];
});
test('array has length 3', () => {
expect(data.length).toBe(3);
});
3. Использование мока и заглушек
Хотя тема моков и заглушек исключена из обсуждения, стоит отметить, что они важны для изоляции тестов и предотвращения побочных эффектов.
3.4 Поддержка и улучшение тестов
1. Покрытие кода тестами
Jest позволяет отслеживать покрытие кода тестами. Добавьте флаг --coverage к команде запуска тестов:
"scripts": {
"test": "jest --coverage"
}
Запустите тесты командой:
npm test
Jest выведет отчет о покрытии кода тестами.
2. Рефакторинг тестов
Периодически пересматривайте и рефакторьте тесты, чтобы поддерживать их актуальными и читаемыми. Используйте возможности TypeScript для улучшения типизации и проверки типов в тестах.
3. Документирование тестов
Добавляйте комментарии и документацию к тестам, чтобы облегчить их понимание для других разработчиков.
// Тестируем функцию суммирования
import { sum } from '../src/sum';
describe('sum function', () => {
// Проверяем, что 1 + 2 равно 3
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
// Проверяем, что -1 + 1 равно 0
test('adds -1 + 1 to equal 0', () => {
expect(sum(-1, 1)).toBe(0);
});
});
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ