close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo

开始

介绍
快速上手
功能导航
名词解释

框架

React
Vue
Preact
Svelte
Solid

基础

命令行工具
开发服务器
构建产物
静态资源
HTML
JSON
Wasm
TypeScript
Web Workers
部署静态站点
升级 Rsbuild

配置

配置 Rspack
配置 Rsbuild
配置 SWC

样式

CSS
CSS Modules
CSS-in-JS
Tailwind CSS v4
Tailwind CSS v3
UnoCSS

进阶

路径别名
环境变量
模块热更新
浏览器范围
浏览器兼容性
模块联邦
多环境构建
服务端渲染(SSR)
测试

优化

代码拆分
产物体积优化
提升构建性能
静态资源内联

迁移

从 Rsbuild 0.x 迁移
webpack
Create React App
Vue CLI
Vite
Vite 插件
Modern.js Builder

调试

开启调试模式
构建性能分析
使用 Rsdoctor

常见问题

通用类问题
功能类问题
异常类问题
热更新问题
📝 在 GitHub 上编辑此页
上一页服务端渲染(SSR)
下一页代码拆分

#测试

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

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

#单元测试

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

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

#Rstest

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

#安装

npm
yarn
pnpm
bun
npm add @rstest/core -D

#配置脚本

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

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

#编写测试

创建测试文件,例如:

src/utils.ts
export function add(a: number, b: number) {
  return a + b;
}
src/utils.test.ts
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 文档 了解更多用法。

#示例

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

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

#端到端测试

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

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