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

贡献者

感谢所有帮助改进本文档的贡献者！