如何提升React Testing Library测试速度？首个测试耗时6秒排查

数据老陈

2026-8-28

问题描述

我注意到编写的首个测试运行耗时约6秒，但该测试逻辑非常简单，仅用于校验Card组件能否成功渲染传入的子元素，测试代码如下：

describe('Card component', () => {
  test('renders children', () => {
    const testString = 'TEST';

    const TestCardChild: React.FC = () => {
      return <p>{testString}</p>;
    };

    render(
      <Card>
        <TestCardChild />
      </Card>
    );

    expect(screen.getByText(testString));
  });
});

我在硬件参数几乎一致的另一台设备上运行相同测试，仅需数毫秒即可完成。请问出现该性能差异的原因是什么？是否需要为VS Code分配更多运行内存，或是需要调整React Testing Library的相关配置参数？

问题解答

首先直接给结论：不用给VS Code分配额外内存，也基本不需要调整React Testing Library配置，6秒的耗时和测试本身的逻辑没有关系，几乎全部来自测试启动阶段的固定开销，硬件参数接近但速度差数百倍，常见原因按排查优先级排序如下：

冷启动与缓存状态差异：无论使用Jest还是Vitest作为测试运行器，首次执行测试时都需要完成JSX/TS语法转译、加载jsdom测试环境、初始化所有依赖包的流程，这个阶段本身耗时就偏高。如果另一台设备已经运行过测试生成了持久化缓存，或是使用SWC/esbuild这类极速转译工具，而当前设备是首次运行测试、使用Babel转译且无本地缓存，出现数秒的速度差属于正常现象。
验证方法非常简单：连续运行两次相同测试，如果第二次运行耗时直接降到毫秒级，就可以确认是冷启动缓存问题，不需要修改任何配置。
运行环境与依赖版本不一致：先做两项基础检查：一是执行node -v和node -p "process.arch"确认Node版本与架构，慢的设备很可能安装了32位Node，或是和另一台设备的Node版本差了多个大版本；二是执行npm ls react检查是否存在多版本React重复加载的问题，同时对比两台设备的Jest/Vitest、jsdom、Testing Library相关依赖版本是否对齐，27版本之前的旧版Jest冷启动速度远低于新版本。
系统安全软件扫描开销：Windows Defender或是第三方杀毒软件的实时防护功能，会在Node进程首次读取node_modules目录下的文件时执行扫描，这个过程经常会把测试启动速度拖慢数秒，把项目目录加入杀毒软件的扫描排除列表即可解决。

如果需要优化首次测试启动速度，可以把转译工具从Babel替换为SWC/esbuild，同时开启测试运行器的持久化缓存，首次启动耗时一般可以压到1秒以内。

内容的提问来源于stack exchange，提问作者Lori