Основы тестирования

Автоматический тест — это код, который отрисовывает компонент, выполняет действия пользователя и проверяет результат. Тесты запускаются одной командой и сразу показывают, если правка что-то сломала. Для проектов на Vite обычно используют Vitest, а для работы с компонентами Solid — пакет @solidjs/testing-library.

Установка

npm install -D vitest jsdom @solidjs/testing-library

vitest запускает тесты, jsdom изображает браузер внутри Node.js, а testing library отрисовывает компоненты и ищет элементы так, как их видит пользователь.

Настройка

Добавьте в vite.config.js раздел test:

// vite.config.js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
 
export default defineConfig({
  plugins: [solidPlugin()],
  server: { port: 3000 },
  test: {
    environment: 'jsdom',
  },
});

В package.json в раздел scripts добавьте строку "test": "vitest".

Первый тест

Проверим счётчик из урока о сигналах. Тест кладут рядом с компонентом в файл с окончанием .test.jsx:

// src/components/Counter.test.jsx
import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent } from '@solidjs/testing-library';
import Counter from './Counter';
 
describe('Counter', () => {
  it('увеличивает число по нажатию', () => {
    render(() => <Counter />);
 
    fireEvent.click(screen.getByRole('button', { name: 'Отметить' }));
 
    expect(screen.getByText('Выполнено задач: 1')).toBeTruthy();
  });
});

npm test

В терминале появится строка с зелёной отметкой и названием теста. Vitest продолжит следить за файлами и перезапустит тест при каждом сохранении.

Что здесь происходит

Строка	Смысл
`render(() => <Counter />)`	Отрисовать компонент; как и в `src/index.jsx`, передаётся функция
`screen.getByRole(...)`	Найти кнопку по роли и надписи
`fireEvent.click(...)`	Нажать на неё
`screen.getByText(...)`	Найти элемент с текстом; если его нет, тест упадёт

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

Тест данных

Функции без интерфейса тестируются ещё проще — без render. Допустим, логику фильтра из урока о Switch вы вынесли в файл src/utils/filterTodos.js как функцию filterTodos(todos, filter):

// src/utils/filterTodos.test.js
import { it, expect } from 'vitest';
import { filterTodos } from './filterTodos';
 
it('оставляет только активные задачи', () => {
  const todos = [{ id: 1, done: true }, { id: 2, done: false }];
 
  expect(filterTodos(todos, 'active')).toEqual([{ id: 2, done: false }]);
});

Такие проверки быстрые, и с них удобно начинать.

Частая ошибка

Искать элементы по классам или структуре разметки, например container.querySelector('.btn'). При любом изменении вёрстки такой тест ломается, хотя для пользователя ничего не поменялось. Ищите элементы по роли и тексту — так, как их находит человек.

Спасибо, что читаете!