Cypress — известный фреймворк для e2e и интеграционного тестирования. Но начиная с версии 7, был представлен Cypress Component Test Runner, который можно использовать для рендеринга и тестирования компонентов в изоляции. Он все еще находится в альфа-версии, поэтому все может измениться!
В этой статье блога мы настроим наше окружение для тестирования компонентов Svelte с использованием Vite.
Запуск нового проекта
Сначала мы начнем с создания нового проекта в Vite.
npm init vite@latest
// Project name: › cypress-svelte-testing
// Select a framework: › svelte
// Select a variant: › svelte-ts
cd cypress-svelte-testing
npm install
*Примечание: ознакомьтесь с документацией Vite, чтобы узнать, как начать проект с другими менеджерами пакетов.
Теперь проект настроен на использование Svelte и TypeScript.
Чтобы запустить наш сервер, нам нужно выполнить команду npm run dev.
Мы будем тестировать приложение, которое состоит из двух компонентов: App и Counter.
Установка зависимостей
Чтобы запустить наши тесты, нам нужно установить несколько зависимостей:
cypress: Фреймворк для тестирования
@cypress/vite-dev-server: Отвечает за ланч и перезапуск сервера при изменении файлов.
cypress-svelte-unit-test: Пакет для монтирования наших компонентов в тестовой среде. К сожалению, на данный момент нет поддержки для нашей текущей среды, поэтому мы будем использовать форк, а затем установим его из репозитория.
@testing-library/cypress: Необязательно. Добавляет селекторы для наших запросов.
Давайте продолжим и установим все это как dev-зависимости.
npm i --save-dev cypress @cypress/vite-dev-server @testing-library/cypress
npm i --save-dev https://github.com/flakolefluk/cypress-svelte-unit-test
Настройка тестового окружения
Теперь нам необходимо проследить за тем, что нам придется обновить или создать некоторые файлы для настройки нашего окружения. Мы пройдемся по каждому из них.
{
"componentFolder": "src",
"testFiles": "**/*spec.{js,jsx,ts,tsx}"
}
import { startDevServer } from '@cypress/vite-dev-server';
import path from 'path';
module.exports = (on, config) => {
on('dev-server:start', async (options) => {
return startDevServer({
options,
viteConfig: {
configFile: path.resolve(__dirname, '..', '..', 'vite.config.js'),
},
});
});
return config;
};
import '@testing-library/cypress/add-commands';
{
// ...
"compilerOptions": {
// ...
// add the following and preserve the rest of the config file
"types": ["cypress", "@testing-library/cypress"]
},
// ...
}
{
// ...
"scripts": {
// ...
"cy:open-ct": "cypress open-ct",
"cy:run-ct": "cypress run-ct"
},
// ...
}
Наши тесты готовы к написанию!
В нашем конфигурационном файле cypress мы объявили, что тесты будут жить внутри src. Это позволяет размещать наши тесты рядом с нашими компонентами.
Написание тестов
Мы протестируем оба компонента, которые были созданы вместе с проектом.
Создайте два файла, по одному рядом с каждым компонентом:
// <root>/src/App.spec.ts
import App from './App.svelte';
import { mount } from 'cypress-svelte-unit-test';
describe('App', function () {
it('renders App with correct heading', () => {
mount(App);
cy.findByRole('heading', { level: 1, name: /hello typescript/i }).should(
'exist'
).should('be.visible');
});
});
// <root>/src/Counter.spec.ts
import Counter from './Counter.svelte';
import { mount } from 'cypress-svelte-unit-test';
describe('Counter', function () {
it('Renders button and updates count when clicked', () => {
mount(Counter);
cy.findByRole('button', { name: 'Clicks: 0' }).should('exist');
cy.findByRole('button', { name: /Click/i }).click();
cy.findByRole('button', { name: 'Clicks: 1' }).should('exist');
});
});
Для начала я написал пару тестов.
Во-первых, мы проверяем компонент App и то, что он содержит заголовок с содержимым, мы также проверяем, что элемент виден.
Для нашего компонента Counter мы сначала проверяем, что он существует. Затем мы щелкаем на нем и проверяем, что текст внутри него обновляется с ожидаемым текущим количеством.
В обоих тестах я использую запросы, предоставляемые пакетом *testing-library*.
Запуск наших тестов
Мы можем запустить наши тесты двумя способами, с помощью команд run-ct и open-ct. Первая из них по умолчанию запускает тесты без головы, а вторая открывает бегунок тестов.
Давайте попробуем обе.
Пора писать больше тестов!
Заключительные мысли
Надеюсь, это руководство поможет вам настроить среду для работы с Vite и Cypress для тестирования компонентов Svelte. Я считаю, что тестирование с помощью команды open-ct очень полезно при написании тестов. Большая часть показанной конфигурации применима и к другим фреймворкам (есть другие пакеты, которые монтируют компоненты). Проверьте официальную документацию для получения дополнительной информации. Приведенный здесь код вы можете найти в этом репозитории.
This Dot Labs — это консалтинговая компания, специализирующаяся на разработке, предоставляющая компаниям услуги по расширению штата, архитектурному руководству и консалтингу.
Мы помогаем внедрять и обучать современным передовым веб-практикам с использованием таких технологий, как React, Angular, Vue, Web Components, GraphQL, Node и других.