close

Rslib

本指南介绍如何将 Rstest 集成到 Rslib 项目中,为你的 Rslib 项目提供无缝的测试体验。

快速开始

新项目

通过在创建时添加 --tools rstest 参数,即可创建一个 Rslib + Rstest 项目:

npx create-rslib --template react-ts --tools rstest --dir my-project

脚手架已包含 Rstest 和示例测试,运行 npm run test 即可执行测试。

已有项目

如需为已有项目添加 Rstest,请参考快速开始安装 Rstest 并配置测试脚本。

复用 Rslib 配置

@rstest/adapter-rslib 是 Rstest 官方提供的适配器,允许 Rstest 自动继承现有 Rslib 配置文件中的配置。这样可以确保测试环境与构建配置一致,避免重复配置。

安装适配器

npm
yarn
pnpm
bun
deno
npm add @rstest/adapter-rslib -D

扩展配置

使用适配器中的 withRslibConfig 函数,可以从 Rslib 配置文件中扩展 Rstest 配置。

import { defineConfig } from '@rstest/core';
import { withRslibConfig } from '@rstest/adapter-rslib';

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

这将自动:

  • 加载你的 rslib.config.ts 文件
  • 将兼容的 Rslib 选项映射到 Rstest 配置
  • 与你提供的其他 Rstest 配置合并

默认情况下,适配器使用 process.cwd() 来解析 Rslib 配置。如果配置文件在其他目录,可以使用 cwd 选项。更多详情请参阅 API

API

withRslibConfig(options)

返回一个加载 Rslib 配置并将其转换为 Rstest 配置的函数。

cwd

  • 类型: string
  • 默认值: process.cwd()

cwd 是用于解析 Rslib 配置文件的当前工作目录。

当你的 Rslib 配置文件位于不同目录,或者你在 monorepo 中运行测试(此时 process.cwd() 可能不是你的配置目录)时,可以指定 cwd 选项从不同的目录解析 Rslib 配置文件。

export default defineConfig({
  extends: withRslibConfig({
    cwd: './packages/my-lib',
  }),
});

configPath

  • 类型: string
  • 默认值: './rslib.config.ts'

Rslib 配置文件的路径。

libId

  • 类型: string
  • 默认值: undefined

要使用的 lib 字段中的 lib 配置 ID。设置为字符串以使用具有匹配 ID 的 lib 配置。

默认情况下,适配器使用 Rslib 的通用配置。如果你的 Rslib 配置有多个 lib 配置:

// rslib.config.ts
export default defineConfig({
  lib: [
    {
      id: 'core',
      format: 'esm',
      dts: true,
      source: {
        define: {
          IS_CORE: true,
        },
      },
    },
    {
      id: 'utils',
      format: 'esm',
      source: {
        define: {
          IS_CORE: false,
        },
      },
    },
  ],
  // 共享配置
});

你可以在 Rstest 配置中引用特定的 lib 配置。Rstest 会将 Rslib 的共享配置和具有匹配 libId 的 lib 配置调整为 Rstest 格式。

// 用于测试 'core' 环境
export default defineConfig({
  extends: withRslibConfig({
    libId: 'core',
  }),
  // core-specific test config
});

当你需要使用不同的配置独立测试应用程序的多个部分时,可以定义多个 Rstest project。每个 project 都可以通过设置 libId 选项来扩展特定的 lib 配置。

export default defineConfig({
  projects: [
    {
      extends: withRslibConfig({ libId: 'node' }),
      include: ['tests/node/**/*.{test,spec}.?(c|m)[jt]s'],
    },
    {
      extends: withRslibConfig({ libId: 'react' }),
      include: ['tests/react/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
    },
  ],
});

modifyLibConfig

  • 类型: (config: RslibConfig) => RslibConfig | void
  • 默认值: undefined

在 Rslib 配置转换为 Rstest 配置之前对其进行修改:

export default defineConfig({
  extends: withRslibConfig({
    modifyLibConfig: (libConfig) => {
      delete libConfig.source?.define;
      return libConfig;
    },
  }),
});

配置映射

适配器会自动将以下 Rslib 选项映射到 Rstest:

Rslib 选项Rstest 等效项说明
lib.idnameLib 名称
pluginsplugins插件配置
source.decoratorssource.decorators装饰器支持
source.definesource.define全局常量
source.includesource.include额外需要 SWC 编译的代码文件
source.excludesource.exclude不需要 SWC 编译的代码文件
source.tsconfigPathsource.tsconfigPathTypeScript 配置路径
resolveresolve模块解析
output.cssModulesoutput.cssModulesCSS Modules 配置
tools.rspacktools.rspackRspack 配置
tools.swctools.swcSWC 配置
tools.bundlerChaintools.bundlerChainBundler chain 配置
output.targettestEnvironmentweb 映射为 'happy-dom',node 及其他映射为 'node'

调试配置

如需查看适配器返回的解析后配置,可以打印结果:

export default defineConfig({
  extends: async (user) => {
    const config = await withRslibConfig({ libId: 'react' })(user);
    console.log('Extended config:', JSON.stringify(config, null, 2));
    return config;
  },
});

相关文档