SuperStarter使用Vitest进行单元测试。这是一个快速轻量的测试框架,兼容Jest的API。单元测试会作为Turborepo中build任务的一部分自动运行。

运行测试

要运行测试,只需执行:

Terminal
pnpm test

这会运行每个应用中__tests__文件夹下的所有测试,不过目前我们只为app项目编写了几个测试。

添加测试

我们使用Testing Library进行测试。这个优秀的库让你能够以接近用户实际交互的方式测试组件。

__tests__文件夹中,创建一个名为[page].test.tsx的新文件(其中[page]是你要测试的页面名称)。以下是home页面的测试示例:

apps/app/__tests__/home.test.tsx
import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import Page from '../app/(unauthenticated)/home/page';

test('首页', () => {
  render(<Page />);
  expect(
    screen.getByRole('heading', {
      level: 1,
      name: 'Hello, world!',
    })
  ).toBeDefined();
});

为其他应用添加Vitest

要为其他应用添加Vitest,需要先安装依赖:

Terminal
pnpm install -D vitest @testing-library/react @testing-library/dom --filter [app]

同时将@repo/testing包添加到package.json文件的devDependencies部分:

apps/[app]/package.json
"devDependencies": {
  "@repo/testing": "workspace:*"
}

在应用根目录创建名为vitest.config.ts的新文件并添加以下内容:

apps/[app]/vitest.config.ts
export { default } from '@repo/testing';

然后,在相关应用的__tests__文件夹中创建新文件,并在package.json文件中添加test命令:

apps/[app]/package.json
{
  "scripts": {
    "test": "vitest"
  }
}

Turborepo会自动识别新的test脚本并运行测试。

之后,只需按照上述说明编写测试即可。