Question

我正在使用Jest来测试一个角度应用程序，它需要很长时间才能运行简单的测试，而我似乎无法找出原因。

我在package.json中的Jest设置：

"jest": {
  "modulePaths": [
    "<rootDir>/src",
    "<rootDir>/node_modules"
  ],
  "testPathIgnorePatterns": [
    ".git/.*",
    "node_modules/.*"
  ],
  "transformIgnorePatterns": [
    "node_modules/.*",
    ".*\\.js"
  ],
  "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.js",
  "preset": "jest-preset-angular",
  "testEnvironment": "jsdom",
  "testRegex": "src/app/.*\\.spec\\.ts$",
  "moduleFileExtensions": [
    "ts",
    "js",
    "json"
  ],
  "verbose": true,
  "cacheDirectory": ".jest-cache",
  "coveragePathIgnorePatterns": [
    ".*\\.(shim\\.ngstyle|ngfactory)\\.ts"
  ],
  "globals": {
    "ts-jest": {
      "tsConfigFile": "./tsconfig.json"
    },
    "__TRANSFORM_HTML__": true
  }
}

我的Jest设置文件：

'use strict';
require('core-js/es6/reflect');
require('core-js/es7/reflect');
require('zone.js');
require('zone.js/dist/proxy.js');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('jest-zone-patch');

const getTestBed = require('@angular/core/testing').getTestBed;
const BrowserDynamicTestingModule = require('@angular/platform-browser-dynamic/testing').BrowserDynamicTestingModule;
const platformBrowserDynamicTesting = require('@angular/platform-browser-dynamic/testing')  .platformBrowserDynamicTesting;

getTestBed().initTestEnvironment(
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting()
);

这是我的简单测试：

fdescribe('RichTextEditorComponent', () => {
  it('should be fast', () => {
    expect(true).toBeTruthy();
  });
});

有没有人知道为什么这需要9秒以上？

Answer 1

阅读以下两个链接：

https://itnext.io/how-to-make-your-sluggish-jest-v23-tests-go-faster-1d4f3388bcdd https://github.com/facebook/jest/issues/7963

这是要考虑的事项列表。它们并非针对您的情况，但由于问题的标题相当笼统，我认为它们可能会帮助一定比例的访问者。不应盲目尝试它们，它们只是研究的起点。

尝试加快笑话测试的速度：

使用--watch
在监视模式下运行
jest在您使用--watch时进行优化。
在您的主机上而不是在docker上运行？ ->我以前使用的是docker exec -it <containername> yarn test，当我改用主机时发现它的速度更快。
升级玩笑版本似乎有些错误使某些版本的速度降低了 https://github.com/facebook/jest/pull/8046

请注意：yarn upgrade遵守〜和^版本指示符，如果您知道自己在做什么，则可能只想删除然后重新添加 yarn remove jest yarn add -D jest 只会为您提供最新的信息
将测试环境从jsdom更改为node

"jest": {
  "testEnvironment": "node"
}

同步运行测试..允许开玩笑进行优化吗？

添加--runInBand选项

设置最大工人数可能会使其更快？

添加--maxWorkers=4选项

就我而言，我升级了jest版本，开始使用--watch和--runInBand并在主机上而不是通过docker运行，并且测试时间从2分钟缩短到10秒。我不知道我的问题到底出在哪里。

Answer 2

另一种可能性是ts-jest很慢。有一个issue about that，但尚未完全解决。

有各种workarounds discussed。它们由setting isolatedModules=true和--maxWorkers=1组成。也就是说，在jest.config.js

'use strict';

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
    globals: {
        'ts-jest': {
            isolatedModules: true
        }
    },
}

然后运行

yarn test --maxWorkers=1

可能值得尝试。另外，也可以放弃ts-jest并使用babel转译。

Answer 3

我还在Angular项目中使用了Jest，但不确定是否是一个好的解决方案。

配置测试模块时，可以使用NO_ERRORS_SCHEMA，而不必在declarations中添加所有嵌套的组件来编译要测试的组件。

beforeEach(async () => {
    return TestBed.configureTestingModule({
      declarations: [
        MyComponent
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

您使用Jest进行的测试是单元测试，因此使用该解决方案，您将仅测试组件。如果要测试组件之间的交互，则将使用量角器或Puppeteer进行端到端测试。

Answer 4

我认为答案最终将需要来自Angular团队。 platformBrowserDynamicTesting的文档稀疏（https://angular.io/api/platform-browser-dynamic/testing/platformBrowserDynamicTesting）。

也许platformBrowserDynamicTesting模拟浏览器并将应用程序的整个DOM加载到内存中。在这种情况下，对于Angular应用程序（没有任何缓存的JavaScript），将近10秒的加速似乎是合理的。也许我在解释这个错误，但是根据您的报告，实际测试似乎在6毫秒内运行，这似乎可以满足您对“快速测试”的要求。如果您添加另一个简单的“应该快速2”测试，我想知道测试需要多长时间。如果总数仍然不到10秒，则表明与Angular platformBrowserDynamicTesting实用程序的启动相比，您的实际测试花费的时间很少。

Answer 5

我通过在全球范围内安装玩笑解决了相同的问题

npm install -g jest@26.0

这是一些具有相同项目和相同测试用例的基准测试结果

本地-Win10版本2004 ------------------node-14.7.0- 11.847 s

全局-Win10版本2004 ------------------node-14.7.0- 0.907 s

全局-Win10版本2004- wsl / ubuntu-18.04 -节点14.7.0- 0.469 s

Answer 6

如果有人处理 jest 测试套件执行缓慢，请将版本升级到 25 或更高版本。 Jest 24 版运行缓慢。

https://jestjs.io/blog/2020/01/21/jest-25#performance-improvements[jest-25#performance-improvements][1]

Answer 7

使用 ng-bulletet

npm install ng-bullet

并配置您的测试床：

  import { configureTestSuite } from 'ng-bullet';
    ...
    configureTestSuite(() => {
        TestBed.configureTestingModule({
            declarations: [ /*list of components goes here*/ ],
            imports: [ /* list of providers goes here*/ ]
        })
    });

更多信息： https://www.npmjs.com/package/ng-bullet

开玩笑 - 简单的测试很慢

7 个答案: