angular - 尝试在 Angular 项目中导入 date-fns 时，Jest 测试失败

Question

我最近将我的一个 Angular 项目更新到了 Angular 13。更新后，我在尝试在项目中运行单元测试时遇到了一些奇怪的错误。

我在一个新的 Angular 项目中创建了一个最小的示例来重现此行为:

import { format } from 'date-fns';
import { de } from 'date-fns/locale';


describe('AppComponent', () => {
  it('date-fns should work', () => {
    const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy', { locale: de });
    expect(result).toEqual('02/11/2014');
  });
});

当我执行npm run test时，测试失败并产生以下输出:

/home/marco/dev/jest-test/node_modules/date-fns/esm/locale/index.js:2
    export { default as af } from "./af/index.js";
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import { format } from 'date-fns';
    > 2 | import { de } from 'date-fns/locale';
        | ^
      3 |
      4 | describe('AppComponent', () => {
      5 |   it('date-fns should work', () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/app/app.component.spec.ts:2:1)

这是我的jest.config.js:

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
    preset: 'jest-preset-angular',
    roots: ['<rootDir>/src/'],
    testMatch: ['**/+(*.)+(spec).+(ts)'],
    setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
    collectCoverage: true,
    coverageReporters: ['html'],
    coverageDirectory: 'coverage/my-app',
    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
        prefix: '<rootDir>/'
    })
};

这是我的tsconfig.spec.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

感谢任何帮助!

Answer 1

按照 jest-preset-angular migration guide 中的建议，我通过将 date-fns 和 .mjs 添加到 transformIgnorePatterns 解决了我的问题。 .

module.exports = {
    // ...other options
    transformIgnorePatterns: ['<rootDir>/node_modules/(?!(.*\\.mjs)|date-fns)']
};