如何提高React测试库速度？

Question

我注意到我的第一个测试需要 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 分配更多 RAM，还是应该为 React 测试库应用任何设置？

感谢致敬

Answer 1

Jest 使用babel-jest插件来使用 Babel 编译 JavaScript 代码。

\n

你可以在这里找到该ts-jest进程，它最后也会使用处理器。babel-jest

\n

Babel由 JavaScript 编写，其性能比 、Go和等系统级语言慢Rust。

\n

转换过程很慢（与上面提到的系统级语言相比），这就是你的测试套件运行缓慢的原因。

\n

现在我将使用esbuild-jest作为 jest 的变压器。创建两个 jest 配置文件并比较时间成本。

\n

jest.config.esbuild.js：

\n

module.exports = {\n  testEnvironment: \'jsdom\',\n  transform: {\n    \'^.+\\\\.tsx?$\': \'esbuild-jest\',\n  },\n  setupFilesAfterEnv: [\'jest-extended\'],\n  // coverageProvider: \'v8\',\n  setupFilesAfterEnv: [\'./jest.setup.js\'],\n};\n

\n

jest.config.rtl.js：

\n

module.exports = {\n  preset: \'ts-jest/presets/js-with-ts\',\n  testEnvironment: \'jsdom\',\n  setupFilesAfterEnv: [\'jest-extended\'],\n  setupFiles: [\'./jest.setup.js\'],\n};\n

\n

使用esbuild-jest：

\n

> jest --config jest.config.esbuild.js "--no-cache" "/workspaces/jest-v26-codelab/stackoverflow/72897761/routes.test.tsx"\n\n PASS  stackoverflow/72897761/routes.test.tsx\n  first\n    \xe2\x9c\x93 Should test 404 route (32 ms)\n    \xe2\x9c\x93 should render home page (10 ms)\n    \xe2\x9c\x93 should render account detail page (3 ms)\n\nTest Suites: 1 passed, 1 total\nTests:       3 passed, 3 total\nSnapshots:   0 total\nTime:        1.457 s\n

\n

时间：1.457秒

\n

使用ts-jest：

\n

> jest --config jest.config.rtl.js "--no-cache" "/workspaces/jest-v26-codelab/stackoverflow/72897761/routes.test.tsx"\n\n PASS  stackoverflow/72897761/routes.test.tsx (11.246 s)\n  first\n    \xe2\x9c\x93 Should test 404 route (32 ms)\n    \xe2\x9c\x93 should render home page (8 ms)\n    \xe2\x9c\x93 should render account detail page (4 ms)\n\nTest Suites: 1 passed, 1 total\nTests:       3 passed, 3 total\nSnapshots:   0 total\nTime:        11.786 s\n

\n

时间：11.786 秒

\n

esbuild 比 babel 更快，因为它是用 Go 编写的。有关更多信息，请参阅为什么 esbuild 很快？

\n

Jest 缓存转换后的模块文件以加快测试执行速度。为了不影响测试结果，我们使用--no-cache选项来禁用它。

\n

PSts-jest可以补充esbuild，见issue。并且，看看这个评论：

\n

\n

目前还没有，它将被选择作为实验性功能。esbuild 不支持某些 TypeScript 特定功能，我们在采用时需要小心。

\n

\n