Question

我正在使用@angular-builders/jest来在测试有角项目时用玩笑来代替业力。我想通过2种库来获得额外的匹配结果：jest-extended和@testing-library/jest-dom。

我找不到自动导入匹配器的方法，因此不必在每个规格文件中导入它们。

用于重现jest-extended的问题的最小示例

首先，创建一个有角度的项目并安装玩笑依赖项

ng new --defaults my-project
cd my-project
yarn add -D jest @types/jest @angular-builders/jest jest-extended

然后编辑angular.json替换构建器

...
"test": {
    "builder": "@angular-builders/jest:run"
},

到目前为止，我可以使用带命令的笑话来运行并通过测试

ng test

现在，我使用一个用笑话扩展的匹配器添加一个测试。在app.component.spec.ts中：

...
  it('should work with jest-extended matchers', () => {
    expect([1, 1, 1]).toBeArrayOfSize(3);
  });

尝试＃1

创建jest.config.js

module.exports = {
  setupFilesAfterEnv: [
    'jest-extended',
  ],
};

不起作用，出现错误TS2339: Property 'toBeArrayOfSize' does not exist on type 'ArrayLikeMatchers<number>'

尝试＃2

使用中间安装文件；创建jest.config.js

module.exports = {
  setupFilesAfterEnv: [
    'my-jest-setup.ts',
  ],
};

与my-jest-setup.ts

import 'jest-extended'

行！测试通过...但是只要我更改规范文件中的内容

...
  it('should work with jest-extended matchers', () => {
    expect([1, 1, 1]).toBeArrayOfSize(3);
    expect(true).toBeTruthy();
  });

并再次运行测试，我得到与尝试＃1相同的错误。我怀疑是缓存问题

解决方法

使用尝试＃2并在每次运行之前清除jest缓存

ng test --clearCache && ng test

我不喜欢这种解决方案，因为当有许多规格文件时，高速缓存旨在加快处理速度，每次清除高速缓存都会产生敏感影响。而且，我认为在观看模式下使用笑话时无法清除缓存

对不起，这有点长，谢谢您的阅读，直到最后

Answer 1

我想找到了解决方法?。诀窍是只需在ts-jest

中启用jest.config.js选项

module.exports = {
  setupFilesAfterEnv: ['jest-extended'],
  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
  },
};

我必须承认我不了解此选项的目标，因此，任何启发都会受到高度赞赏。

作为奖励，测试执行速度更快。

到目前为止，没有明显的缺点，但是如果发生奇怪的事情，我会通知您。

我希望这对您有帮助

编辑：实际的缺点是，当ts-jest编译运行测试时，我们松开了类型检查。 ts-jest documentation

说明了isolatedModules选项的目标

Answer 2

我终于找到了我认为正确的解决方案。从最小示例开始，以用笑话扩展，

重现该问题

创建jest.config.js文件（尝试1终于是一个不错的开始）

module.exports = {
  setupFilesAfterEnv: [
    'jest-extended',
  ],
};

编辑tsconfig.spec.json并将"types": ["jasmine", "node"]替换为"types": ["jest", "node", "jest-extended"]

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node", "jest-extended"] // <==== what was missing
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

和瞧。实际上，这将在编译中包含jest和jest-extended声明文件。现在，我可以获得TypeScript类型检查的所有好处以及缓存的速度提高（显然，首次运行除外）。

我希望这对您有帮助

我无法正确配置玩笑以导入模块（setupFilesAfterEnv）

2 个答案: