使用 Angular v13 + Jest + ESM + NGXS 的错误运行测试

Question

从 Angular v12 到 v13 的迁移很艰难，虽然应用程序运行完美，但测试对我们来说仍然是一个问题。

我们已经运行使用带有 ESM 的 Jest 进行了 v12 测试（因为我们有一个 WebWorker 并且 import.meta.url 从 v12 开始就需要 ESM）到现在为止已经成功了。

但是现在 v13 仅附带 ES 模块，它在一些需要 angular 代码的第三方库中出现问题。

现在 jest-preset-angular 支持运行ning v13 + ESM 有一个工作示例 app I thought I'd give it another try. This is also being discussed in NGXS's slack。

我目前最基本的配置如下：

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

const esModules = ['tslib'].join('|');

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
    preset: 'jest-preset-angular/presets/defaults-esm',
    globals: {
        'ts-jest': {
            useESM: true,
            stringifyContentPathRegex: '\.(html|svg)$',
            tsconfig: '<rootDir>/tsconfig-esm.spec.json',
        },
    },
    moduleNameMapper: {
        ...pathsToModuleNameMapper(paths, {prefix: '<rootDir>'}),
        tslib: 'tslib/tslib.es6.js',
    },
    transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

我已经多次阅读文档，我正在关注在不同的 repo 上打开的迁移问题，试图解决该问题。我还浏览了最新的相关问题，包括。

有没有人设法拥有一个工作的 v13 + Jest + ESM + NGXS 堆栈？我似乎无法弄清楚。

任何想要使用最小复制存储库的人都可以找到它 here。测试运行在没有 ESM 的情况下很好并且使用 ESM 失败，因为我们最终尝试从 NGXS bundle.

require @angular

Answer 1

我无法在使用 Jest 保留 import.meta.url 语法时让它工作，这要求 Node 是运行并带有 --experimental-vm-modules 标志。

我注意到只要节点标志不存在，我就可以运行使用经典 ESM 配置进行测试。

所以我使用这个 babel plugin

在我的测试配置中将 import.meta.url 语法转换回 CommonJS

使用 Angular v13 + Jest + ESM + NGXS 的错误 运行 测试

Errors running tests using Angular v13 + Jest + ESM + NGXS

jest-preset-angular

使用 Angular v13 + Jest + ESM + NGXS 的错误运行测试