使用 Angular 13 + 清晰度的 Jest

Question

我目前正在尝试升级现有的 Angular 使用 VMware Clarity 的应用程序。我已经按照 Angular 更新指南从 8.x 升级到 10.x。然而除此之外，jest 配置中断，因为较新的 Clarity 版本和 Angular 13 使用 esm.

所以我尝试构建一个最小的工作示例来研究所需的配置。

从 https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v13 , i added Clarity as described in https://github.com/vmware-clarity/ng-clarity/blob/main/docs/INSTALLATION.md#installing-clarity-angular-

的 jest-preset-angular 示例应用程序开始

示例应用程序的 test 和 test-esm 运行配置在 package.json 中运行没有问题。但是一旦我将 ClarityModule 添加到 app.module.ts 导入和运行 test-esm 配置，app.component.spec.ts 和 app.component.router.spec.ts 的测试套件就会失败同样的错误：

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
From src/app/app.component.spec.ts.
                                                                                                                                    
          at async Promise.all (index 0)                                                                                            
 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    ENOENT: no such file or directory,
 open 'C:\Users\NAME\IdeaProjects\example-app-13_test\node_modules\@cds\core\index.jsicon\shapes\times.js'

      at Runtime.readFile (node_modules/jest-runtime/build/index.js:2552:21)
          at async Promise.all (index 3)

将 ClarityModule 添加到 app.module.ts 后立即发生错误，而没有将任何 Clarity 元素添加到示例应用程序的 html。

对我来说，ENOENT 部分似乎很奇怪，因为看起来合法的 Clarity .js 文件的两条路径相交了。

我尝试了各种不同的组合，添加 jest.useFakeTimers、transformIgnorePatterns 和我发现的针对类似问题的其他建议，但这些要么什么也没做，要么导致更多错误。由于我对jest的配置也很缺乏经验，所以我也可能用错了。

能否请您给我一些可以解决上述错误的建议？

我运行所在的环境是：

Angular CLI: 13.3.6
Node: 16.14.0
Package Manager: npm 8.7.0
OS: win32 x64

Clarity 软件包的版本是：

"@cds/core": "^6.0.0",
"@clr/angular": "^13.3.1",
"@clr/ui": "^13.3.1",

Answer 1

因为它没有通过您的测试，并且 Angular 版本 13 默认启用了 ModuleTeardown 选项，我假设在您的 test.ts 中禁用拆卸选项可能会有所帮助。

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { teardown: { destroyAfterEach: false } },
);

Answer 2

经过更多调试后我发现，Jest 在处理 node_modules\@cds\core\internal-components\close-button\register.js.

时似乎无法解析 ClarityIcons

所以我尝试将 @cds/core 的部分映射添加到 jest-esm.config.mjs 中的 moduleNameMapper 并最终成功运行 jest-preset-angular 的测试没有错误的示例应用程序。在一一消除路径后，似乎添加以下映射足以使测试工作：

"@cds/core/icon": '<rootDir>/node_modules/@cds/core/icon/index.js'

使用 Angular 13 + 清晰度的 Jest

Using Jest with Angular 13 + Clarity

jestjs

angular

vmware-clarity

jest-preset-angular