如何改善反应测试库速度？

Question

我注意到我的第一个测试需要大约6秒钟才能运行，但是这很简单。它检查了卡组件是否成功地使经过的孩子成功：

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

我在另一台机器上进行了几乎相同规格的测试，并且在几个miliseconds上运行。您是否有这样的提示？我应该将更多的RAM分配给VS代码，还是应该为React测试库申请任何设置？

谢谢，问候

Answer 1

玩笑使用 babel-jest 插件以使用babel来编译Javascript代码。

您可以找到ts-jest process 在这里它还将在最后使用babel-jest处理器。

babel由JavaScript编写，其性能比GO和Rust等系统级语言慢。

转换过程很慢（与上述系统级语言相比），这就是为什么您的测试套件缓慢运行的原因。

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

jest.config.esbuild.js：

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?
  jest.config.rtl.js ：
module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['jest-extended'],
  setupFiles: ['./jest.setup.js'],
};

使用 Esbuild-jest-jest ：
> jest --config jest.config.esbuild.js "--no-cache" "/workspaces/jest-v26-codelab/stackoverflow/72897761/routes.test.tsx"

 PASS  stackoverflow/72897761/routes.test.tsx
  first
    ✓ Should test 404 route (32 ms)
    ✓ should render home page (10 ms)
    ✓ should render account detail page (3 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.457 s

 时间：1.457 S < /strong>
使用 TS-JEST ：
> jest --config jest.config.rtl.js "--no-cache" "/workspaces/jest-v26-codelab/stackoverflow/72897761/routes.test.tsx"

 PASS  stackoverflow/72897761/routes.test.tsx (11.246 s)
  first
    ✓ Should test 404 route (32 ms)
    ✓ should render home page (8 ms)
    ✓ should render account detail page (4 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        11.786 s

 时间：11.786 S 
 Esbuild比Babel更快，因为它是由 去。 参见为什么Esbuild快速？
有关更多信息，请 文件以加快测试执行。为了不影响测试结果，我们使用  -  no-Cache 选项将其禁用。
 PS  ts-jest 可能会添加 esbuild ，请参阅问题。而且，看看这个评论：

还不存在，它将被选为实验特征。 Esbuild不支持某些我们需要谨慎采用的特定特定功能。

: 'esbuild-jest',
  },
  setupFilesAfterEnv: ['jest-extended'],
  // coverageProvider: 'v8',
  setupFilesAfterEnv: ['./jest.setup.js'],
};

jest.config.rtl.js：

使用Esbuild-jest-jest：

时间：1.457 S < /strong>

使用TS-JEST：

时间：11.786 S

Esbuild比Babel更快，因为它是由 去。 参见为什么Esbuild快速？

有关更多信息，请 文件以加快测试执行。为了不影响测试结果，我们使用- no-Cache选项将其禁用。

PS ts-jest可能会添加esbuild，请参阅问题。而且，看看这个评论：

还不存在，它将被选为实验特征。 Esbuild不支持某些我们需要谨慎采用的特定特定功能。

Answer 2

我本人观察到的性能通过@swc/jest ts-jest 。
只需运行npm install @swc/jest，然后更新您的jest.config.js文件，如下所示：

transform: {
  "^.+\\.(j|t)sx?$": '@swc/jest',
}

不利的一面是它会转换打字稿代码，但不做任何类型检查因此，您将必须这样做。我发现单独进行的速度要快得多。