keywords: §

Тестирование React §

Тестирование React будем проводить с помощью React Testing Library

Установка и базовая настройка §

yarn add -D vitest Для установки требуется vite

Настройка vitest §

Есть два способа настройки vitest:

• через vite.config.ts
• через vitest.config.ts

В данном проекте мы рассмотрим только второй способ

vitest.config.ts §

Создаем файл vitest.config.ts со следующим содержимым

import { mergeConfig } from 'vite'
import { defineConfig } from 'vitest/config'
import viteConfig from './vite.config'
 
export default mergeConfig(viteConfig, defineConfig({
  test: {
  },
}))

Запуск §

• Для запуска тестов используется команда yarn vitest
• Для запуска проверки покрытия используется команда yarn vitest run --coverage

Для работы функции coverage необходимо дополнительно установить: yarn add -D @vitest/coverage-c8'

Настройка react-testing-library §

1. yarn add -D jsdom устанавливаем jsdom для доступа к html в vitest
2. Добавляем в настройку vite или vitest jsdom в качестве окружения

test: {
    environment: 'jsdom',
},

3. yarn add -D @testing-library/react @testing-library/jest-dom подключаем саму библиотеку React Testing Library
4. yarn add -D @testing-library/user-event добавляем библиотеку, чтобы имитировать действия пользователей
5. Создаем файл setup, чтобы не писать настройки для каждого файла отдельно со следующим содержимым:

//setup.js
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';
 
// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);
 
// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
  cleanup();
});

6. Дорабатываем настройки vitest:

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: 'setup.js', // Нужно указать весь путь для файла setup.js
  },
	```
##### Основы тестирования
 
По умолчанию файлы для тестирования должны иметь следующий вид `**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}` Изменить его можно изменив настройки в файле `vitest.config.ts` добавив поле `include` с нужным шаблоном.
 
Основные ключевые слова
 
- describe - позволяет объединить тесты по какому-либо признаку
- it - функция, описывающая один тест
- expect - функция, проверяющая ожидаемое значение с реальным
 
Пример использования
 
```ts
//isSortedDescendant.test.ts
import { describe, it, expect } from "vitest";
import { isSortedDescendant } from "./isSortedDescendant";
 
describe('isSortedDescendant tests', () => {
  it('expect true', () => {
    const array = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
    expect(isSortedDescendant(array)).toBeTruthy();
  })
 
  it('expect false', () => {
    const array = [10, 90, 8, 7, 6, 5, 4, 3, 2, 1];
    expect(isSortedDescendant(array)).toBeFalsy();
  })
})

Возможности expect §

После expect(testingValue) через точку нужно указать одну из следующих функций для сравнения

• toBeTruthy() - testingValue любое кроме false, 0, '', null, undefined и NaN
• toBeFalsy() - testingValue равно одному из следующих значенийfalse, 0, '', null, undefined и NaN
• toBe(actualValue) | to.equal(actualValue) - testingValue равно actualValue
• not.toBe(actualValue) | not.to.equal(actualValue) - testingValue не равно actualValue
• toBeCloseTo(actualValue, decimal)
• toMatchObject(actualValue) - позволяет сравнивать объекты неполным вхождением
• toThrowError() - проверяет, что было выброшено исключение
• resolves() rejects() - проверяет, что промис завершился с указанным статусом
• arrayContaining(actualValue) - проверяет, что в массиве ест ьвсе перечисленные элементы

Управление запускаемыми тестами §

• describe.only - запускает только этот блок с тестами
• describe.skip - не запускает это блок с тестами
• describe.todo - для заглушек ненаписанных тестов
• describe.skipIf - пропускает тест, если условие выполняется

Действия перед/после тестов §

• beforeEach - выполняется перед каждым тестом
• afterEach - выполняется после каждого теста
• beforeAll - выполняется один раз перед всеми тестами
• afterAll - выполняется один раз после всех тестов

Доп опции §

• describe.each - позволяет передать набор данных, которые будут использоваться во всех тестах внутри блока