Vitest

Vitest は、Vite を利用した超高速なユニットテストフレームワークです。Qwik City はデフォルトで Vite を使用しているため、Vitest は事実上のユニットテストフレームワークとなっています。

使用方法

次の Qwik スタータースクリプトを使用すると、Vitest を簡単に追加できます。

npm run qwik add vitest

コマンドを実行すると、Vitest がインストールされ、新しいコンポーネントがプロジェクトに追加されます。コンポーネントは、`src/components/example` ディレクトリと、`example.spec.tsx` という名前の新しいユニットテストに追加されます。QwikCity を使用したコンポーネントの例については、QwikCityMockProvider を参照してください。

example.spec.tsx

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');
});

貢献者

このドキュメントの改善にご協力いただいたすべての貢献者に感謝します。