#测试

Rsbuild 本身不内置测试框架，它可以与各种流行的测试工具配合使用。

本指南将介绍如何在 Rsbuild 应用中添加 单元测试 和 端到端测试。

#单元测试

单元测试用于测试独立的组件和函数。Rsbuild 可以与 Rstest、Vitest、Jest 等测试框架配合使用。

下面以 Rstest 为例，介绍如何在 Rsbuild 应用中添加单元测试。

#Rstest

Rstest 基于 Rsbuild 实现的测试框架，为 Rsbuild 应用提供了一流的支持。它提供与 Jest 兼容的 API，同时原生支持 TypeScript、ESM 等现代特性。

#安装

npm add @rstest/core -D

yarn add @rstest/core -D

pnpm add @rstest/core -D

bun add @rstest/core -D

deno add npm:@rstest/core -D

#配置脚本

在 package.json 中添加测试脚本：

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

#编写测试

创建测试文件，例如：

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

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

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

#运行测试

# 运行测试
npm run test

# 运行并监听
npm run test:watch

#配置 Rstest

Rstest 提供了多种配置选项，可以通过在项目根目录创建 rstest.config.ts 文件来进行配置。以下是一个示例配置文件：

import { defineConfig } from '@rstest/core';

export default defineConfig({
  include: ['test/**/*.test.ts'],
  testEnvironment: 'node',
});

你可以在配置文件中指定测试文件的匹配模式、设置测试环境、配置代码覆盖率等。有关所有可用配置选项的详细信息，请参阅 Rstest 文档。

#复用 Rsbuild 配置

@rstest/adapter-rsbuild 是 Rstest 官方提供的适配器，用于复用你现有的 Rsbuild 配置文件。这样可以确保测试环境与构建配置一致，避免重复配置。

import { defineConfig } from '@rstest/core';
import { withRsbuildConfig } from '@rstest/adapter-rsbuild';

export default defineConfig({
  extends: withRsbuildConfig(),
  // 额外的 rstest 特定配置
});

关于 withRsbuildConfig 函数的更多信息，请参阅 Rstest 文档。

以上就是使用 Rstest 的基本步骤，查看 Rstest 文档 了解更多用法。

#示例

参考以下示例了解更多用法：

• react-rstest：使用 Rstest 和 React Testing Library 来测试 React 组件。
• react-jest：使用 Jest 和 React Testing Library 来测试 React 组件。

#端到端测试

端到端测试用于测试完整的用户流程，确保应用在真实浏览器环境中正常工作。

你可以使用 Playwright 进行 E2E 测试，它是一个现代的端到端测试框架，详见 Playwright 文档。