Vitest

Vitest 是一个由 Vite 提供支持的高速单元测试框架。由于 Qwik City 默认使用 Vite，Vitest 是我们的默认单元测试框架。

使用方法

您可以通过使用以下 Qwik 脚本轻松添加 vitest：

npm run qwik add vitest

运行该命令后，vitest 将被安装，并且一个新的组件将被添加到您的项目中。只要新的单元测试命名为 example.spec.ts，该组件将被添加到 src/components/example 目录中。

example.spec.ts

import { createDOM } from '@builder.io/qwik/testing';
import { test, expect } from 'vitest';
import { ExampleTest } from './example';
 
test(`[ExampleTest 组件]: 应该渲染 ⭐`, 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 组件]: 应该渲染 💣`, async () => {
  const { screen, render } = await createDOM();
  await render(<ExampleTest flag={false} />);
  expect(screen.outerHTML).toContain('💣');
});
 
test(`[ExampleTest 组件]: 点击计数器 +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');
});

Contributors

Thanks to all the contributors who have helped make this documentation better!