Введение в тестирование ReactJS

Привет, будущие разработчики React! Я рад быть вашим проводником в этом путешествии в мир тестирования React. Как кто-то, кто teaches computer science на протяжении многих лет, я亲眼 видел, как тестирование можетtransform a good developer into a great one. Так что давайте окунемся и развеем вместе тайны тестирования React!

Why Testing Matters

Before we start coding, позвольте поделиться быстрой историей. У меня был студент, который создал漂亮的 React приложение. Оно выглядело идеально... до тех пор, пока не упало во время демонстрации. Тогда он понял это трудным путем:外观 могут обманывать, но тесты не лгут. Тестирование не только о catching bugs; это о доверии. Когда ваши тесты проходят, вы можете спокойно спать, зная, что ваш код работает так, как задумано.

Create React App: Your Testing Playground

Setting Up Your Environment

Давайте начнем с создания новой React приложения с использованием Create React App. Этот инструмент настраивает готовый к использованию React проект с уже настроенным тестированием. Откройте ваш терминал и введите:

npx create-react-app my-react-testing-app
cd my-react-testing-app

Поздравляю! Вы только что создали свою первую React приложение с встроенными тестовыми возможностями. Это как получить новую игрушку с уже вставленными батарейками!

Your First Test

Create React App идет с примерным тестовым файлом. Давайте посмотрим на него. Откройте src/App.test.js:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

Давайте разберем это:

1. Мы import необходимые тестовые инструменты и наш компонент App.
2. Мы определяем тест с использованием функции test.
3. Мы рендерим наш компонент App.
4. Мы ищем элемент с текстом "learn react".
5. Мы expected этот элемент быть в документе.

Чтобы запустить этот тест, используйте команду:

npm test

Если все настроено правильно, вы должны увидеть проходящий тест. Поздравляю с вашим первым тестом React!

Testing in a Custom Application

Теперь, когда мы видели базовый тест, давайте создадим свой собственный компонент и протестируем его.

Creating a Simple Component

Давайте создадим простой компонент счетчика. Создайте новый файл src/Counter.js:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

Этот компонент отображает счетчик и кнопку для его увеличения.

Writing Tests for Our Counter

Теперь давайте протестируем наш компонент Counter. Создайте новый файл src/Counter.test.js:

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('renders initial count of 0', () => {
render(<Counter />);
const countElement = screen.getByText(/count: 0/i);
expect(countElement).toBeInTheDocument();
});

test('increments count when button is clicked', () => {
render(<Counter />);
const button = screen.getByText(/increment/i);
fireEvent.click(button);
const countElement = screen.getByText(/count: 1/i);
expect(countElement).toBeInTheDocument();
});

Давайте разберем эти тесты:

1. Первый тест проверяет, если初始 счетчик равен 0.
2. Второй тест имитирует клик по кнопке и проверяет, если счетчик увеличивается до 1.

Запустите npm test снова, и вы должны увидеть, как эти новые тесты проходят!

Advanced Testing Concepts

When you become more comfortable with basic testing, you'll want to explore more advanced concepts. Here's a table of some methods you'll commonly use in React testing:

Method	Description	Example
render	Рендерит React компонент для тестирования	render(<MyComponent />)
screen.getByText	Находит элемент по его текстовому содержимому	screen.getByText(/hello world/i)
screen.getByRole	Находит элемент по его ARIA роли	screen.getByRole('button')
fireEvent	Имитирует DOM собыя	fireEvent.click(button)
waitFor	Ждет, пока ожидания выполнятся	await waitFor(() => expect(element).toBeVisible())
act	Обертывает код, который вызывает обновления React состояния	act(() => { /* perform actions */ })

Testing Asynchronous Behavior

React приложения часто включают асинхронные операции. Давайте создадим компонент, который загружает данные и протестируем его:

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>Loading...</div>;

return <div>User Name: {userData.name}</div>;
}

export default UserData;

Теперь давайте протестируем этот компонент:

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('loads and displays user data', async () => {
render(<UserData />);

expect(screen.getByText(/loading/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/user name:/i)).toBeInTheDocument();
});
});

Этот тест проверяет состояние загрузки и затем ждет, пока данные пользователя будут отображены.

Conclusion

Тестирование в React может показаться пугающим сначала, но это неоценимый навык, который сделает вас лучше разработчиком. Помните, каждый тест, который вы пишете, как сеть безопасности для вашего кода. Он catching вас, когда вы падаете, и дает вам信心, чтобы climb higher.

While you continue your React journey, keep exploring different testing techniques. Mock API calls, test error states, and challenge yourself to write tests before writing your components (Test-Driven Development). The more you practice, the more natural it will become.

Happy testing, and may your console always be green with passing tests!

Credits: Image by storyset