[英]Error: zone-testing.js is needed for the fakeAsync() test helper but could not be found. When running test on Angular webapp using serenityJS+Jasmine
I am trying to run component testing on Angular web app using serenityJS + Jasmine but encountered the error below.我正在尝试使用 serenityJS + Jasmine 在 Angular web 应用程序上运行组件测试,但遇到以下错误。 Any idea how I can resolve this issue?
知道如何解决这个问题吗?
Message:
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
Stack: Error: zone-testing.js is needed for the fakeAsync() test helper but could not be found.堆栈:错误:fakeAsync() 测试助手需要 zone-testing.js 但找不到。 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.
请确保您的环境包括 zone.js/dist/zone-testing.js at resetFakeAsyncZone (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\fake_async.ts:25:9) at UserContext . (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\before_each.ts:26:5) at 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)
(C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\before_each.ts:26:5) at at at processImmediate (internal/timers.js:439:21) at process.topLevelDomainCallback (domain.js :131:23) 消息:错误:在此配置中 Angular 需要 Zone.js 堆栈:错误:在此配置中 Angular 需要新 NgZone 中的 Zone.js (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\src\ zone\ng_zone.ts:129:13) 在 TestBedViewEngine._initIfNeeded (C:\Users\zhenweiwong\Desktop\serenityjsframework\packages\core\testing\src\test_bed.ts:409:9) 在 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.在用户上下文。 (C:\Users\zhenweiwong\Desktop\serenityjsframework\jasmine-test\spec\app1.component.spec.ts:32:29) at
(C:\Users\zhenweiwong\Desktop\serenityjsframework\jasmine-test\spec\app1.component.spec.ts:32:29) 在
Hello little bit late to answer but I leave the comment here for future reference:您好,回答有点晚了,但我在这里留下评论以供将来参考:
ERROR ORIGIN错误来源
In my case, the error was found in the test.ts file.就我而言,错误是在test.ts文件中发现的。 This file sets the TestBed config that is used by default in Angular spec files when created with the command ng generate component my-component .
此文件设置使用命令ng generate component my-component创建时 Angular 规范文件中默认使用的 TestBed 配置。
SOLUTION解决方案
The fix is to make sure that the following imports are at the top of the file test.ts before any other import:修复方法是确保以下导入在任何其他导入之前位于文件test.ts的顶部:
import 'zone.js';
import 'zone.js/testing';
Be careful with your configurations that might alter the order of those imports as it may lead to break the tests again.请注意您的配置可能会改变这些导入的顺序,因为它可能会导致再次中断测试。 That's why you might, over the test.ts file:
这就是为什么您可以通过test.ts文件:
FURTHER TROUBLESHOTING进一步的故障排除
You might also want to look if the following imports are present:您可能还想查看是否存在以下导入:
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';
Same issue was solved with other approaches in this thread .此线程中的其他方法解决了相同的问题。
This issue comes into picture from Angular v11.这个问题来自 Angular v11。
Solution: Move import 'zone.js/dist/zone-testing';
解决方案:移动
import 'zone.js/dist/zone-testing';
to the top in src/test.ts
file.到
src/test.ts
文件的顶部。
I solved this problem by using Angular waitForAsync
.我通过使用 Angular
waitForAsync
解决了这个问题。
Instead of:代替:
beforeEach(async () => {
await TestBed.configureTestingModule({declarations: [BannerComponent]}).compileComponents();
});
Try to use the following:尝试使用以下内容:
import { waitForAsync } from '@angular/core/testing';
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({declarations: [BannerComponent]}).compileComponents();
}));
In Vscode open file test.ts .在 Vscode 中打开文件test.ts 。
Add line down on top file, first line .在顶部文件的第一行添加行。
import 'zone.js/testing';
OBS: if your vscode organize your imports there file, use o organize-imports-disable-next-line . OBS:如果您的 vscode 在那里组织您的导入文件,请使用 o Organize -imports-disable-next-line 。
Example:例子:
import 'zone.js/testing';
// organize-imports-disable-next-line
For me this error because of syntax,对我来说这个错误是因为语法,
From从
beforeEach(async(async () => {
await TestBed.configureTestingModule({declarations:
[ListComponent]}).compileComponents();
}));
To到
beforeEach(async () => {
await TestBed.configureTestingModule({declarations:
[ListComponent]}).compileComponents();
});
I ended up here after getting a similar issue in my app after upgrading from Angular 14 to Angular 15. I solved it this way by:从 Angular 14 升级到 Angular 15 后,我的应用程序出现类似问题后,我来到这里。我通过以下方式解决了这个问题:
angular.json
file and in the project "test"
changing its "options"
by removing "main": "src/test.ts",
and adding this instead:angular.json
文件,并在项目"test"
中通过删除“main”更改其"options"
"main": "src/test.ts",
并改为添加:"polyfills": ["zone.js", "zone.js/testing"],
src/test.ts
file can now be deletedsrc/test.ts
文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.