我无法正确配置 jest 以导入模块 (setupFilesAfterEnv)

Question

我使用@angular-builders/jest 是为了在测试角度项目时用玩笑代替业力。 有 2 个库我想获得额外的匹配器来开玩笑：jest-extended 和 @testing-library/jest-dom。

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

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

首先，创建一个 Angular 项目并安装 jest 依赖项

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

然后编辑angular.json替换builder

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

到目前为止，我可以使用 jest 命令运行并通过测试

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

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

抱歉，有点长，谢谢你读到最后

Answer 1

我终于找到了我认为正确的解决方案。从 最小的例子开始，用 jest-extended 重现问题，

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

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

1. 编辑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 类型检查的所有好处和缓存的速度改进（显然，第一次运行除外）。

希望对你有帮助

Answer 2

我想我找到了解决方案?。诀窍是在jest.config.js 中简单地启用ts-jest 选项

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

我不得不承认我不了解这个选项的目标，因此，任何启发都将受到高度赞赏。

另外，测试执行速度更快。

到目前为止没有明显的缺点，但如果发生奇怪的事情，我会告诉你。

希望对你有帮助

编辑：实际的缺点是当 ts-jest 编译运行测试时我们会松散类型检查。 isolatedModules 选项的目标在ts-jest documentation 中进行了解释