问题标签 [jest-preset-angular]

我正在尝试将版本 angular 8 更新为 12。在 Angular 8 中，我使用带有 [jest-preset-angular.] 1版本 7.0.0 的 jest 框架现在为了与 angular 12 兼容，我更新了 jest-preset-角度版本到 11.0.1。并更新 jest 配置设置。现在，大多数测试都失败了。

jest.config.js

测试文件

问题：

但是项目中没有命名文件 app-header.component.html 或 app-header.component.scss。在 Sharedcomponent 中，我们使用了一个作为本地 npm 包制作的自定义库。并将它们全部导入 SharedComponent。

sharedModule.ts 文件

谁能告诉为什么会这样以及如何解决它？

我对子项目添加了一些更改example-app-v12-monorepo以反映我的情况：

1. 创建public_api.ts文件作为共享类的桶examples/example-app-v12-monorepo/projects/app1/src/app/shared/public_api.ts。

2. 配置tsconfig.json文件，examples/example-app-v12-monorepo/tsconfig.json因此它包含我的更改：

3. 在中添加了模块映射examples/example-app-v12-monorepo/projects/app1/jest.config.js：

4. 将共享文件夹的相对路径更改为绝对路径。例如：

'../shared/highlight.directive'->'@app1/shared'

结果：当我尝试运行测试时yarn test出现错误：

有没有办法配置/修复这个路径映射列表？

##edit 由于调查进度

当我添加<rootDir>到绝对路径时，我得到了最接近想要的结果：导致 @app1/shared': '<rootDir>/projects/app1/src/app/shared/public_api ： jest-preset-angular/examples/example-app-v12-monorepo/projects/app1/projects/app1/src/app/shared/public_api

基本上，如果我删除/projects/app1部分，一切都会按预期工作。

我现在的问题：在我的（大）应用程序中，我有很多来自项目根目录的预定义路径，而 Jest 需要在子项目级别（monorepo）设置我需要找出一种方法来转换传递的路径所以它不会加倍路径段。示例：tsconfig 路径： example/path/project1/app/src/app/public_api.ts Jest 设置级别： project1/app/src/app/public_api.ts

结果： example/path/project1/app/project1/app/src/app/public_api.ts

有没有办法改造它？

我正在尝试在 Angular 13 项目中使用 jest 进行测试。我将 jest-preset-angular 与 @angular-builders/jest 一起使用。

我使用 ngx-pipes，这是一个不是为 Angular 13 编译的库。它在正常的 Angular 构建期间工作正常。但在开玩笑的测试运行中，它会导致错误：

最小复制：https ://github.com/dhcode/jest-preset-angular-13-issue

在我的实际项目中，其他 Angular 库也有同样的错误。我ng serve之前跑过，所以 ngcc 编译是在运行测试之前完成的。

如何让我的测试运行并识别使用旧 Angular 版本构建的外部库？

在将 Angular 12 更新到 13 之后，我的一些 Jest 测试开始失败。它总是同样的错误：

/Users/undsoft/projects/work/webui/node_modules/date-fns/esm/format/index.js:1。({"Object.":function(module,exports,require,__dirname,__filename,jest){import isValid from "../isValid/index.js";
SyntaxError: 不能在模块外使用 import 语句

在对象处的 Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
。(node_modules/date-fns-tz/format/index.js:8:38)

我的版本是：

“date-fns”：“~2.28.0”，
“date-fns-tz”：“~1.2.2”，
“jest”：“~27.4.5”，
“jest-preset-angular”：“~11.0 .1",

开玩笑的配置是：

我试过添加

和 date-fns-tz/date-fns 分开。

我正在学习如何以角度设置玩笑测试。我遵循jest-preset-angular的指示。

我可以成功地让笑话以角度运行，但我的应用程序在根目录中也有两个子模块，这jest会产生很多错误。我现在想避免这种情况。

我想知道如何设置配置jest或jest-preset-angular仅在src文件夹中运行测试？

我有两个关于 jest 设置的文件<rootDir>：

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

到目前为止，我们一直在使用 Jest 和 ESM 运行 v12 测试（因为我们有一个 WebWorker 并且import.meta.url从 v12 开始就需要 ESM）。

但是现在 v13 只附带了 ES 模块，它在一些需要 Angular 代码的第三方库中被破坏了。

现在jest-preset-angular支持运行v13 + ESM一个工作示例应用程序，我想我会再试一次。这也在 NGXS 的slack中进行了讨论。

我目前非常基本的配置如下：

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

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

对于任何想要对最小的复制回购感到烦躁的人，你可以在这里找到它。测试在没有 ESM 的情况下运行良好，而使用 ESM 则失败，因为我们最终尝试require从 NGXS bundle 中@angular。

我有一个版本 13 的 Angular 应用程序，它使用外部依赖项 js-cookie在浏览器中设置和获取一些 cookie。作为测试环境，我将jest与jest-preset-angular一起使用。请参阅下面的 package.json 的所有依赖项。

我的问题是，在 Angular 12 中，正在使用的组件的单元测试Cookies.set('test', '123')运行得非常好。但是，当功能正常工作并且构建（ng build）正在运行时，使用 angular 13，运行 jest 单元测试时会出现错误消息：

package.json 中的依赖：

知道变化来自哪里吗？在与 angular13 存在外部依赖关系的情况下进行单元测试时是否存在任何已知问题？

我不想模拟外部依赖js-cookie的方法。

角度分量示例：

单元测试：

I am transiting my testing from Karma to Jest in an Angular project, which has multiple pages. I can make the jest work for a simple component, which does not require many imports. However, for a large page, I have to manually re-import all the components again in the *.spec.ts files. Take one minimal example of pages:

page1.module.ts is importing necessary modules for this entire page:

and index.ts is used to export all the modules to the child feature components:

To make the feature1.component.spec.ts work, I have to re-import all modules and components again. That said I need to import model1 ... module10 manually. However, my project already created more than 40 features/components, I would prefer an easier way to set up globally so that the feature's *.spec.ts can know how to read parent modules.

Is there any way to achieve this? I really appreciate it! Thank you

I have a basic setup in jest.config.ts using jest-preset-angular following this tutorial:

版本

11.1.1

重现步骤

主分支是在我添加esModule库引用之前，例如 lodash-es add_esmodule-lib-reference分支包含 esModule 库引用，这就是问题所在。

1. 克隆我的仓库：https ://github.com/chikakow/ng13-jest-esm-import-repro
2. 留在主分支。然后yarn install
3. npm run test. 验证 app.component.spec.ts 是否通过。
4. 将分支切换到add_esmodule-lib-reference
5. npm run test. 请注意，lodash-es 包中的测试失败。
6. 打开 jest.config.js 并取消注释 transformIgnorePatterns 代码。
7. npm run test. 请注意，您会收到“Jest 无法解析文件。” 错误。

预期行为

在 Angular 13 更新之前，transformIgnorePatterns 工作正常，并且在运行 jest 之前编译了 lodash-es 等 esModule 库。
更新前的代码：/ const esModules = ['lodash-es', 'echarts', 'zrender'].join('|'); ... transformIgnorePatterns: [node_modules /(?!${esModules}).+(js|jsx)$, ], ...

Angular 13 更新后的代码：/ const esModules = ['lodash-es', 'echarts', 'zrender'].join('|'); ... transformIgnorePatterns: [ 'node_modules/(?!.*.mjs$)',node_modules /(?!${esModules}).+(js|jsx)$, ] ... ,

在 Angular 13 更新之后，我把由于我试图只覆盖 transformIgnorePatterns 并添加了新记录的覆盖模式 'node_modules/(?!.*.mjs$)',，Jest 不应该抛出 “Jest failed to parse a file”。错误，测试应该通过。

实际行为

Jest 抛出 “Jest 无法解析文件。” 错误并且测试失败。

环境