Vitest

Vitest 是一個由 Vite 支援的極速單元測試框架。由於 Qwik City 預設使用 Vite，Vitest 是我們事實上的單元測試框架。

用法

您可以使用以下 Qwik starter 腳本輕鬆新增 Vitest

npm run qwik add vitest

執行指令後，系統會安裝 vitest 並將新元件新增至您的專案。只要新的單元測試命名為 example.spec.tsx，元件就會被新增至 src/components/example 目錄。如果您正在尋找 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');
});

貢獻者

感謝所有協助改進此文件的貢獻者！