错误：fakeAsync() 测试助手需要 zone-testing.js，但无法找到。使用 serenityJS+Jasmine 在 Angular webapp 上运行测试时

Question

我正在尝试使用 serenityJS + Jasmine 在 Angular Web 应用程序上运行组件测试，但遇到了以下错误。知道如何解决这个问题吗？

信息：

错误：fakeAsync() 测试助手需要 zone-testing.js，但无法找到。请确保您的环境包含 zone.js/dist/zone-testing.js 堆栈：

   Error: zone-testing.js is needed for the fakeAsync() test helper but could not be found.
           Please make sure that your environment includes zone.js/dist/zone-testing.js
       at resetFakeAsyncZone (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\fake_async.ts:25:9)
       at UserContext.<anonymous> (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\before_each.ts:26:5)
       at <Jasmine>
       at processImmediate (internal/timers.js:439:21)
       at process.topLevelDomainCallback (domain.js:131:23)
 Message:
   Error: In this configuration Angular requires Zone.js
 Stack:
   Error: In this configuration Angular requires Zone.js
       at new NgZone (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\src\zone\ng_zone.ts:129:13)
       at TestBedViewEngine._initIfNeeded (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:409:9)
       at TestBedViewEngine.createComponent (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:599:10)
       at Function.TestBedViewEngine.createComponent (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:245:36)     
       at UserContext.<anonymous> (C:\Users\zhenweiwong\Desktop\serenityjsframework\jasmine-test\spec\app1.component.spec.ts:32:29)
       at <Jasmine>

Answer 1

你好，回答有点晚了，但我在这里留下评论以供将来参考：

错误来源

就我而言，错误是在test.ts文件中发现的。此文件设置使用命令nggenerate component my-component创建时在 Angular 规范文件中默认使用的 TestBed 配置。

解决方案

解决方法是确保在任何其他导入之前将以下导入放置在文件 test.ts 的顶部：

// Top of test.ts file
import 'zone.js';
import 'zone.js/testing';

请小心您的配置，这可能会改变这些导入的顺序，因为它可能会导致再次破坏测试。这就是为什么您可以通过test.ts文件：

1. 停用 onSave 优化导入。
2. 避免运行Prettier、Beautify或其他重新组织导入的代码样式格式化程序。
3. 检查像Husky这样的预提交钩子，它可以格式化文件并重新组织导入。

进一步的故障排除

您可能还想查看是否存在以下导入：

import 'zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';

该线程中的其他方法解决了同样的问题。

Answer 2

从 Angular 10 升级到 Angular 12 后，我遇到了同样的问题。然后我通过将 移动import 'zone.js/testing到文件顶部来修复它test.ts

Answer 3

这个问题是从 Angular v11 开始出现的。

解决方案： 移至文件import 'zone.js/dist/zone-testing';顶部src/test.ts。

Answer 4

在 Vscode 中打开文件test.ts。

在顶部文件的第一行添加一行。

import 'zone.js/testing';

OBS：如果您的 vscode 组织您的导入文件，请使用 o Organize-imports-disable-next-line。

例子：

import 'zone.js/testing';
// organize-imports-disable-next-line

查看更多

Answer 5

角15

从 Angular 14 升级到 Angular 15 后，我的应用程序中遇到了类似的问题，最终来到这里。我通过以下方式解决了这个问题：

1. 编辑angular.json文件并在项目中通过删除并添加以下内容来"test"更改它："options""main": "src/test.ts",

"polyfills": ["zone.js", "zone.js/testing"],

2. src/test.ts现在可以删除该文件