2.1 Инструменты для тестирования TypeScript
TypeScript, как строго типизированный язык, уже добавляет определенный уровень надежности, но тестирование остается необходимым этапом. Сейчас мы рассмотрим различные инструменты и фреймворки для тестирования TypeScript проектов, а также покажем, как их настроить и использовать.
Инструменты для тестирования TypeScript
Для тестирования TypeScript проектов существует множество инструментов, каждый из которых имеет свои особенности и преимущества. Основные инструменты включают:
- Jest
- Mocha
- Karma
- Ava
- Cypress
2.2 Jest
Jest — это популярный фреймворк для тестирования JavaScript, разработанный Facebook. Jest идеально подходит для тестирования React-приложений, но также поддерживает тестирование любых JavaScript и TypeScript проектов.
Установка и настройка Jest
1. Установите Jest и необходимые зависимости:
npm install --save-dev jest ts-jest @types/jest
2. Создайте файл конфигурации Jest jest.config.js:
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
};
3. Добавьте скрипт для запуска тестов в package.json:
"scripts": {
"test": "jest"
}
4. Напишите простой тест в src/__tests__/example.test.ts:
function sum(a: number, b: number): number {
return a + b;
}
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
Запустите тесты командой:
npm test
2.3 Mocha
Mocha — это гибкий фреймворк для тестирования JavaScript, который часто используется вместе с библиотекой chai для утверждений. Mocha предоставляет больше свободы в настройке и использовании различных инструментов и библиотек.
Установка и настройка Mocha
1. Установите Mocha, Chai и необходимые типы:
npm install --save-dev mocha chai ts-node @types/mocha @types/chai
2. Добавьте скрипт для запуска тестов в package.json:
"scripts": {
"test": "mocha -r ts-node/register 'src/**/*.test.ts'"
}
3. Напишите простой тест в src/example.test.ts:
import { expect } from 'chai';
function sum(a: number, b: number): number {
return a + b;
}
describe('sum', () => {
it('should add 1 + 2 to equal 3', () => {
expect(sum(1, 2)).to.equal(3);
});
});
Запустите тесты командой:
npm test
2.4 Karma
Karma — это тестовый раннер, разработанный AngularJS командой. Karma позволяет запускать тесты в реальных браузерах и идеально подходит для тестирования фронтенд-приложений.
Установка и настройка Karma
1. Установите Karma и необходимые плагины:
npm install --save-dev karma karma-chrome-launcher karma-jasmine karma-typescript jasmine @types/jasmine
2. Создайте файл конфигурации Karma karma.conf.js:
module.exports = function (config) {
config.set({
frameworks: ['jasmine', 'karma-typescript'],
files: [
{ pattern: 'src/**/*.ts' },
],
preprocessors: {
'**/*.ts': 'karma-typescript',
},
reporters: ['progress', 'karma-typescript'],
browsers: ['Chrome'],
singleRun: true,
});
};
3. Добавьте скрипт для запуска тестов в package.json:
"scripts": {
"test": "karma start"
}
4. Напишите простой тест в src/example.test.ts:
describe('sum', () => {
it('should add 1 + 2 to equal 3', () => {
const result = sum(1, 2);
expect(result).toBe(3);
});
});
Запустите тесты командой:
npm test
2.5 Ava
Ava — это современный фреймворк для тестирования, который отличается простотой и минималистичностью. Ava поддерживает асинхронное тестирование из коробки.
Установка и настройка Ava
1. Установите Ava и необходимые типы:
npm install --save-dev ava typescript @types/node
2. Создайте файл конфигурации Ava ava.config.js:
export default {
extensions: ['ts'],
require: ['ts-node/register'],
files: ['src/**/*.test.ts']
};
3. Добавьте скрипт для запуска тестов в package.json:
"scripts": {
"test": "ava"
}
4. Напишите простой тест в src/example.test.ts:
import test from 'ava';
function sum(a: number, b: number): number {
return a + b;
}
test('sum', (t) => {
t.is(sum(1, 2), 3);
});
Запустите тесты командой:
npm test
2.6 Cypress
Cypress — это мощный инструмент для тестирования энд-то-энд (end-to-end), который позволяет тестировать ваше приложение в браузере, симулируя поведение пользователя.
Установка и настройка Cypress
1. Установите Cypress:
npm install --save-dev cypress
2. Добавьте скрипт для запуска тестов в package.json:
"scripts": {
"test": "cypress open"
}
3. Запустите Cypress:
npm test
4. Создайте тест в cypress/integration/example.spec.ts:
describe('My First Test', () => {
it('Visits the Kitchen Sink', () => {
cy.visit('https://example.cypress.io');
cy.contains('type').click();
cy.url().should('include', '/commands/actions');
cy.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com');
});
});
Cypress предоставляет мощные возможности для автоматизированного тестирования пользовательского интерфейса.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ