#Testing

Rsbuild doesn't include built-in testing frameworks, but integrates seamlessly with popular testing tools.

This guide shows how to add unit testing and end-to-end testing to Rsbuild applications.

#Unit testing

Unit tests verify individual components and functions in isolation. Rsbuild can work with testing frameworks like Rstest, Vitest, Jest, and others.

The following example uses Rstest to show how to add unit tests to an Rsbuild application.

#Rstest

Rstest is a testing framework built on Rsbuild that provides first-class support for Rsbuild applications. It offers Jest-compatible APIs while natively supporting modern features like TypeScript and ESM.

#Installing

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

#Configuring scripts

Add test scripts to your package.json:

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

#Writing tests

Create test files, for example:

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);
});

#Running tests

# Run tests
npm run test

# Run and watch
npm run test:watch

#Configuring Rstest

Rstest provides various configuration options that can be set by creating an rstest.config.ts file in the root of your project. Here is an example configuration file:

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

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

In the configuration file, you can specify test file matching patterns, set the test environment, configure code coverage, etc. For detailed information on all available configuration options, please refer to the Rstest documentation.

#Reusing Rsbuild configuration

@rstest/adapter-rsbuild is the official adapter that lets Rstest reuse your existing Rsbuild configuration. This keeps your test and build environments aligned and avoids duplicated setup.

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

export default defineConfig({
  extends: withRsbuildConfig(),
  // Additional rstest-specific configuration
});

For more information about the withRsbuildConfig function, please refer to the Rstest documentation.

These are the basic steps for using Rstest. Check the Rstest documentation for more usage details.

#Examples

Refer to the following examples for more usage patterns:

• react-rstest: Using Rstest and React Testing Library to test React components.
• react-jest: Using Jest and React Testing Library to test React components.

#End-to-end testing

End-to-end testing validates complete user workflows, ensuring your application functions correctly in real browser environments.

For E2E testing, we recommend Playwright, a modern end-to-end testing framework. See the Playwright documentation for details.