使用 Vitest 和测试库进行高效的前端测试

Vite原生测试环境带来的开发速度提升

Jest 多年来一直是前端测试的主流，但其设置复杂性和开销是问题。通过组合共享 Vite 设置的“Vitest”和“React 测试库”，您可以获得极快的测试环境。

我们总结了构建高度可维护且难以破坏的测试套件的实用原则。

原则：测试“用户行为”而不是“实现细节”

直接测试组件的内部状态会导致脆弱的测试，每次重构都会破坏测试。基本思想是验证屏幕向用户显示的行为。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';

test('入力からログイン完了までのフローを検証', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

  await user.type(screen.getByLabelText('メールアドレス'), 'test@example.com');
  await user.click(screen.getByRole('button', { name: 'ログイン' }));

  expect(await screen.findByText('ようこそ')).toBeInTheDocument();
});

异步更新的陷阱：正确使用查询函数

getBy**：同步验证元素“现在存在”。如果不存在则立即错误。
findBy**：等待API获取等“异步延迟显示”的元素（返回Promise）。
queryBy**：用于断言该元素“屏幕上不存在”（返回 null）。

并行化点减少 CI 执行时间

Vitest默认使用线程并行执行。对于涉及 DOM 操作的测试，请在“afterEach”中正确重置模拟，以保持每个测试用例的独立性，最大化并行测试的数量，并降低 CI 成本。