#CSS

Rstest 基于 Rsbuild 和 Rspack 构建，因此可以直接导入 CSS 文件和 CSS Modules。Rstest 会根据当前测试环境选择合适的处理方式。

#默认行为

在 Node.js 测试中，Rstest 默认不输出 CSS：

• 普通 CSS 文件不会生成样式产物。启用对应 plugin 后，Less 和 Sass 文件仍会执行预处理，以便发现语法和编译错误，但不会生成样式产物。
• CSS Modules 仍会被处理，并导出 class name 映射，供组件测试使用。

例如，下面的代码可以直接在测试中导入：

import styles from './Button.module.css';
import './reset.css';

export function Button() {
  return <button className={styles.button}>Submit</button>;
}

import { expect, test } from '@rstest/core';
import styles from './Button.module.css';

test('loads CSS Modules', () => {
  expect(styles.button).toEqual(expect.any(String));
});

CSS Modules 通常使用 .module.css、.module.less 或 .module.scss 文件名。你可以通过 output.cssModules 自定义 class name 生成规则和其他 CSS Modules 选项。

在 Browser Mode 中，测试运行在真实浏览器中，样式会参与页面渲染。如果需要验证 computed styles、布局或视觉效果，请使用 Browser Mode。

#使用 Less 或 Sass

Rstest 内置支持普通 CSS 和 CSS Modules。Less、Sass 等预处理器需要安装并启用对应的 Rsbuild plugin。

#Less

@rsbuild/plugin-less 用于编译 Less 文件，包括 CSS Modules 中的 .module.less 文件。

npm add @rsbuild/plugin-less -D

yarn add @rsbuild/plugin-less -D

pnpm add @rsbuild/plugin-less -D

bun add @rsbuild/plugin-less -D

deno add npm:@rsbuild/plugin-less -D

import { pluginLess } from '@rsbuild/plugin-less';
import { defineConfig } from '@rstest/core';

export default defineConfig({
  plugins: [pluginLess()],
});

#Sass

@rsbuild/plugin-sass 用于编译 Sass 和 SCSS 文件，包括 .module.sass 和 .module.scss 文件。

npm add @rsbuild/plugin-sass -D

yarn add @rsbuild/plugin-sass -D

pnpm add @rsbuild/plugin-sass -D

bun add @rsbuild/plugin-sass -D

deno add npm:@rsbuild/plugin-sass -D

import { pluginSass } from '@rsbuild/plugin-sass';
import { defineConfig } from '@rstest/core';

export default defineConfig({
  plugins: [pluginSass()],
});

如果项目已经通过 @rstest/adapter-rsbuild 复用 Rsbuild 配置，请把这些 plugin 配置在 rsbuild.config.ts 中，而不是重复配置在 rstest.config.ts 中。

import { pluginLess } from '@rsbuild/plugin-less';
import { pluginSass } from '@rsbuild/plugin-sass';

export default {
  plugins: [pluginLess(), pluginSass()],
};

#CSS Modules 的性能优化

Rstest 的默认 CSS Modules 处理会尽量保持与 Rsbuild 构建结果一致。因此，导入 .module.less 或 .module.scss 时，仍可能执行对应的 Less 或 Sass 编译。

如果测试只需要读取 styles.button 这样的属性，不关心真实生成的 class name，可以使用 identity-obj-proxy 替代 CSS Modules 模块：

npm add identity-obj-proxy -D

yarn add identity-obj-proxy -D

pnpm add identity-obj-proxy -D

bun add identity-obj-proxy -D

deno add npm:identity-obj-proxy -D

然后通过 NormalModuleReplacementPlugin 替换 CSS Modules 文件：

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

export default defineConfig({
  tools: {
    rspack(config, { rspack, isServer }) {
      if (!isServer) {
        return;
      }

      config.plugins.push(
        new rspack.NormalModuleReplacementPlugin(
          /\.module\.(css|less|sass|scss)$/,
          (resource) => {
            resource.request = 'identity-obj-proxy';
          },
        ),
      );
    },
  },
});

这个方式可以绕过 CSS Modules 的预处理和转换，通常会更快，尤其是 Sass 文件较多时。但它只是一个测试替身：

• styles.button 通常返回 button，不会返回真实构建中的 hash class name。
• 不会验证 Less、Sass 或 CSS Modules 语法是否正确。
• CSS Module 文件不存在或路径写错时不会被发现，因为请求会在解析原文件之前被替换。这样测试构建可能通过，但应用构建仍会失败。
• 不适合验证 composes、:global、真实 class name、样式产物或客户端与服务端 class name 是否一致。

因此，建议只在测试关注组件逻辑、不关注样式 class name 时使用。需要验证真实 CSS Modules 行为的测试，应保留 Rstest 默认处理；需要验证浏览器渲染效果的测试，应使用 Browser Mode。