#Rstest

Rstest 是一个基于 Rspack 的 JavaScript 测试框架。它通过 Rspack 的打包流程运行测试，并可借助官方适配器复用现有 Rspack 配置中的模块解析、代码转换和插件。

本指南介绍如何使用 Rstest 编写单元测试，以及如何通过 @rstest/playwright 编写端到端测试。

#配置 Rstest

#创建新项目

创建项目时，请参阅快速上手，并在交互式提示中选择 Rstest - testing。生成的项目会包含 Rstest 所需的依赖、配置和测试脚本。

#添加到现有项目

将 Rstest 和官方的 Rspack 适配器安装为开发依赖：

npm add @rstest/core @rstest/adapter-rspack -D

yarn add @rstest/core @rstest/adapter-rspack -D

pnpm add @rstest/core @rstest/adapter-rspack -D

bun add @rstest/core @rstest/adapter-rspack -D

deno add npm:@rstest/core npm:@rstest/adapter-rspack -D

然后在 package.json 中添加运行测试和监听文件变化的脚本：

{
  "scripts": {
    "test": "rstest",
    "test:watch": "rstest --watch"
  }
}

#复用 Rspack 配置

在项目根目录创建 rstest.config.ts，通过 withRspackConfig 复用现有的 Rspack 配置：

import { withRspackConfig } from '@rstest/adapter-rspack';
import { defineConfig } from '@rstest/core';

export default defineConfig({
  extends: withRspackConfig(),
});

适配器会加载 rspack.config.ts，将兼容的 Rspack 配置转换为 Rstest 配置，并与其他 Rstest 配置合并。

#单元测试

单元测试用于隔离验证模块和函数。

#编写测试

创建源文件和对应的测试文件：

export function add(a: number, b: number) {
  return a + b;
}

import { expect, test } from '@rstest/core';
import { add } from './utils';

test('adds two numbers correctly', () => {
  expect(add(1, 2)).toBe(3);
  expect(add(-1, 1)).toBe(0);
});

#运行测试

# 运行全部测试
pnpm run test

# 以 watch 模式运行测试
pnpm run test:watch

# 运行测试名称匹配指定模式的测试
pnpm run test -- -t 'adds two numbers'

更多测试 API、Mock、Snapshot 和覆盖率等功能，请参阅 Rstest 文档。

#端到端测试

@rstest/playwright 是 Rstest 提供的 Playwright 集成包。它提供 Playwright 风格的断言和 fixtures，可测试本地、预览或已部署的应用，并与单元测试共用 Rstest 的运行器、配置和报告流程。

#安装 @rstest/playwright

安装 Rstest 集成包和 Playwright 浏览器自动化运行时：

npm add @rstest/playwright playwright -D

yarn add @rstest/playwright playwright -D

pnpm add @rstest/playwright playwright -D

bun add @rstest/playwright playwright -D

deno add npm:@rstest/playwright npm:playwright -D

然后安装 Chromium 浏览器：

pnpm exec playwright install chromium

#测试运行中的应用

从 @rstest/playwright 导入 test 和 expect，访问由 Rspack 提供服务的应用：

import { expect, test } from '@rstest/playwright';

test('home page', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/Rspack/);
});

#测试本地构建产物

使用 Rstest 提供的 serve fixture，可以从本地文件启动静态应用。测试结束后，服务器会自动清理：

import { expect, test } from '@rstest/playwright';

test('home page', async ({ page, serve }) => {
  const { url } = await serve('./dist/index.html');

  await page.goto(url);
  await expect(page.locator('h1')).toHaveText('Home');
});

端到端测试使用 Rstest runner，可以和单元测试放在一起，并通过同一条命令运行：

pnpm run test

更多 fixtures、浏览器配置、Trace 和调试方式，请参阅 Rstest：Playwright。