当试图在Angular项目中导入日期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

我通过在transformIgnorePatterns中添加date-fns和.mjs解决了我的问题，如jost预设的角度偏移指南中所建议的。

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