Vitest

Vitest - это молниеносный фреймворк для модульного тестирования на базе Vite. Поскольку Qwik City по умолчанию использует Vite, Vitest дефакто является нашим фреймворком модульного тестирования.

Использование

Вы можете легко добавить Vitest, используя следующий скрипт Qwik:

npm run qwik add vitest

После выполнения этой команды и установки Vitest, в ваш проект будет добавлен новый компонент. Компонент будет установлен в каталог src/components/example вместе с новым модульным тестом в файле под именем example.spec.ts.

Если вы ищете пример компонента QwikCity, посмотрите QwikCityMockProvider.

example.spec.ts

import { createDOM } from '@builder.io/qwik/testing';
import { test, expect } from 'vitest';
import { ExampleTest } from './example';
 
test(`[ExampleTest Component]: Should render ⭐`, async () => {
  const { screen, render } = await createDOM();
  await render(<ExampleTest flag={true} />);
  expect(screen.outerHTML).toContain('⭐');
  const div = screen.querySelector('.icon') as HTMLElement;
  expect(div.outerHTML).toContain('⭐');
});
 
test(`[ExampleTest Component]: Should render 💣`, async () => {
  const { screen, render } = await createDOM();
  await render(<ExampleTest flag={false} />);
  expect(screen.outerHTML).toContain('💣');
});
 
test(`[ExampleTest Component]: Click counter +1`, async () => {
  const { screen, render, userEvent } = await createDOM();
  await render(<ExampleTest flag={true} />);
 
  expect(screen.outerHTML).toContain('Count:0');
 
  const spanBefore = screen.querySelector('span') as HTMLDivElement;
  await userEvent('.btn-counter', 'click');
  expect(spanBefore.innerHTML).toEqual('Count:1');
 
  const spanAfter = screen.querySelector('span') as HTMLDivElement;
  await userEvent('button', 'click');
  expect(spanAfter.innerHTML).toEqual('Count:2');
});

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!