Настройте Vite2 с Vitest и Jest для тестирования в реагирующем приложении.

Одним из преимуществ инструмента сборки Vite является то, что это невероятно быстрый инструмент сборки JavaScript для разработки веб-приложений с использованием современных интерфейсных фреймворков, таких как React, Vue, Svelte и т. д. За последние 2 года мы наблюдаем растущий рост сообщества пользователей Vite.

Я впервые услышал о Vite, когда работал разработчиком Vue/Nuxt в 2020 году. Как человек, которого я очень уважаю, твит Эвана Ю о Vite был всем, что мне нужно было увидеть, чтобы узнать, насколько актуален Vite.

Vite — отличный инструмент для сборки JS, и он молниеносно быстр. Хотя я не использовал его очень долго, я уже в восторге от его производительности и множества функций, которые он предлагает. Он имеет очень простой и понятный интерфейс API.

В этом уроке я научу вас, как настроить проект Vite для тестирования приложения React с использованием библиотеки Jest, testing-library/react и vitest. Шаги следующие

Эшафот новый проект

Используйте эту ссылку, чтобы узнать, как создать новый проект реагирования с помощью инструмента сборки Vite и запустить сервер разработки.

Установить зависимости

После установки всех необходимых пакетов и подтверждения того, что сервер разработки запущен, установите следующие дополнительные зависимости:

yarn add jest @types/jest @testing-library/jest-dom @testing-library/react @testing-library/user-event @vitest/ui jsdom@latest vitest@latest -D

Vitest — это молниеносно быстрая среда модульного тестирования на базе Vite. "Узнать больше"

Обновите свой `package.json` скрипт

Откройте файл package.json, который находится в корне вашего проекта. Добавьте следующие записи в объект scripts:

// File: package.json

"scripts": {
	// other entries
	"test": "vitest",
	"coverage": "vitest run --coverage"
},

Тест установки

Создайте новую папку и назовите ее test в папке src вашего проекта. Внутри тестовой папки добавьте новый файл и назовите его setup.ts. Внутри этого файла добавьте следующее:

// File: src/test/setup.ts
import "@testing-library/react"

Добавьте `Vitest` конфигураций

Создайте новый файл vitest.config.ts в корне вашего проекта. Добавьте следующий контент

// File: vitest.config.ts
import { configDefaults, defineConfig } from "vitest/config";
export default defineConfig({
 test: {
  ...configDefaults,
  environment: "jsdom",
  globals: true,
  setupFiles: "./src/test/setup.ts",
 // you might want to disable it, if you don't have tests that rely on CSS
 // since parsing CSS is slow
  css: false,
 },
});

Добавьте тестовые файлы

Теперь вы можете создать файл с суффиксом .test.tsx или .test.ts в любом месте каталога вашего проекта. В этих файлах вы будете писать свой тест. Например: я создам файл fn.ts для хранения простых вспомогательных функций, которые я могу использовать в своем проекте. Я создам функцию для преобразования объекта в параметр поиска URL. Это выглядит следующим образом:

// File: src/util/fn.ts

export function objectToSearchParam(
	obj: string | string[][] | Record<string, string>
) {
	return new URLSearchParams(obj);
}

Затем я создаю файл fn.test.ts для проверки файла fn в том же каталоге и добавляю следующее:

// File: src/util/fn.test.ts

/**
 * @jest-environment jsdom
 */

import { objectToSearchParam } from "./fn";

describe("Util functions", () => {
	it("converts object to url search parameter", () => {
		const searchParam = objectToSearchParam({
			key: "value",
			key2: "value2",
		});
		expect(searchParam).toBe(`?key=value&key2=value2`);
	});
});

Выше приведен очень простой тестовый пример. Вы можете написать более сложные тестовые примеры, которые могут взаимодействовать с реагирующими компонентами и событиями dom, если хотите. Это только для демонстрационных целей.

Запустить тесты

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

yarn test

После запуска тестовой команды я получаю следующее:

Было ли это полезно? Оставляйте комментарии и ставьте пальцы вверх!

Настройте Vite2 с Vitest и Jest для тестирования в реагирующем приложении.