Тестирование: Jest, Mocha, chai, sinon, testing-library
📚 Почему тестирование — это круто?
Представь: ты написал супер-сложный код, и он работает... пока не работает. Внезапно что-то ломается, и ты тратишь часы, чтобы найти крошечную ошибку. Тестирование — это страховка от такого кошмара.
🔹 Преимущества тестирования:
✅ Предсказуемость: код работает так, как ты ожидаешь.
✅ Быстрый фидбэк: находишь баги до того, как их найдут пользователи.
✅ Рефакторинг без страха: меняешь код и уверен, что ничего не сломал.
💡 Совет: Начни с небольших тестов, даже если проект маленький. Привычка тестировать — навык топовых разработчиков!
🛠️ Инструменты тестирования: кто есть кто
🔹 Jest — фаворит React-разработчиков
Простой, мощный и «из коробки» готовый к работе. Подходит для unit- и integration-тестов.
test('2 + 2 должно быть 4', () => {
expect(2 + 2).toBe(4);
});
Плюсы:
- Встроенные моки и spy-функции (jest.fn()).
- Поддержка TypeScript.
- Быстрый и удобный для фронтенда.
🔹 Mocha + Chai — классика гибкости
Mocha — это «движок» тестов, а Chai добавляет удобные assertions (проверки).
const { expect } = require('chai');
describe('Math operations', () => {
it('should return 4 when adding 2 + 2', () => {
expect(2 + 2).to.equal(4);
});
});
Почему Mocha?
- Гибкость: можно подключать любые библиотеки (Chai для проверок, Sinon для моков).
- Подходит для Node.js и браузерных тестов.
🔹 Sinon — мастер моков и стабов
Помогает изолировать код, подменяя зависимости.
const sinon = require('sinon');
const userService = {
getName: () => 'Danila'
};
test('should mock userService', () => {
const stub = sinon.stub(userService, 'getName').returns('Mocked!');
expect(userService.getName()).toBe('Mocked!');
stub.restore(); // Важно очистить!
});
🔹 Testing Library — тестируй как пользователь
Фокусируется на поведении, а не на внутренней реализации. Идеально для React/Vue.
import { render, screen } from '@testing-library/react';
import Button from './Button';
test('button has correct text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
🎯 Как выбрать инструмент?
| Инструмент | Когда использовать? | Пример использования |
|---|---|---|
| Jest | React/Vue, простота | expect(component).toMatchSnapshot() |
| Mocha + Chai | Гибкость, Node.js | expect(response).to.have.status(200) |
| Sinon | Моки, стабы, таймеры | sinon.fakeServer.create() |
| Testing Library | Тесты, близкие к пользовательскому опыту | screen.getByRole('button') |
🚀 Практика: тестируем функцию
Допустим, у нас есть функция formatUser, которая обрабатывает данные пользователя:
function formatUser(user) {
if (!user.name || !user.age) {
throw new Error('Invalid user data');
}
return `${user.name}, ${user.age} years old`;
}
Тест с Jest:
test('formatUser returns correct string', () => {
const user = { name: 'Danila', age: 30 };
expect(formatUser(user)).toBe('Danila, 30 years old');
});
test('formatUser throws error if data is invalid', () => {
expect(() => formatUser({})).toThrow('Invalid user data');
});
Тест с Mocha + Chai:
describe('formatUser', () => {
it('returns correct string', () => {
const user = { name: 'Danila', age: 30 };
expect(formatUser(user)).to.equal('Danila, 30 years old');
});
it('throws error if data is invalid', () => {
expect(() => formatUser({})).to.throw('Invalid user data');
});
});
🔥 Что дальше?
- Начни с малого: протестируй одну функцию сегодня.
- Изучи Jest для фронтенда или Mocha для бэкенда.
- Попробуй Testing Library, если работаешь с React.
Тестирование — это не «надо», а «круто». Чем больше тестов, тем увереннее ты себя чувствуешь! 🚀