UnhandledPromiseRejectionPolice: TypeError: 使用 Jest + Angular 将循环结构转换为 JSON

使用 jest-preset-angle 来执行单元测试，但是得到了一个警告，因为 UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON不确定是什么导致了错误，由于这个原因，应用程序卡住了，没有运行其他单元测试。

PASS  src/app/pages/result/result-filter/result-filter.component.spec.ts (6.251 s)
PASS  src/app/pages/result/search-navigation/search-navigation.component.spec.ts
PASS  src/app/pages/result/filter-modal/filter-modal.component.spec.ts (5.699 s)
PASS  src/app/app.component.spec.ts
PASS  src/app/pages/test-type/test-type.component.spec.ts (12.857 s)
(node:3280) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
|     property 'element' -> object with constructor 'Object'
|     property 'componentProvider' -> object with constructor 'Object'
--- property 'parent' closes the circle
at stringify (<anonymous>)
at writeChannelMessage (internal/child_process/serialization.js:117:20)
at process.target._send (internal/child_process.js:808:17)
at process.target.send (internal/child_process.js:706:19)
at reportSuccess (/Users/macbook/Projects/Playtime Projects/IDP/Idp.Bx.Ui/idp/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3280) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3280) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:3281) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
|     property 'element' -> object with constructor 'Object'
|     property 'componentProvider' -> object with constructor 'Object'
--- property 'parent' closes the circle
at stringify (<anonymous>)
at writeChannelMessage (internal/child_process/serialization.js:117:20)
at process.target._send (internal/child_process.js:808:17)
at process.target.send (internal/child_process.js:706:19)
at reportSuccess (/Users/macbook/Projects/Playtime Projects/IDP/Idp.Bx.Ui/idp/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3281) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3281) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:3279) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
|     property 'element' -> object with constructor 'Object'
|     property 'componentProvider' -> object with constructor 'Object'
--- property 'parent' closes the circle
at stringify (<anonymous>)
at writeChannelMessage (internal/child_process/serialization.js:117:20)
at process.target._send (internal/child_process.js:808:17)
at process.target.send (internal/child_process.js:706:19)
at reportSuccess (/Users/macbook/Projects/Playtime Projects/IDP/Idp.Bx.Ui/idp/node_modules/jest-worker/build/workers/processChild.js:67:11)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3279) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3279) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.


RUNS  src/app/pages/location/location.component.spec.ts
RUNS  src/app/pages/signup/signup.component.spec.ts
RUNS  src/app/pages/login/login.component.spec.ts


Test Suites: 10 passed, 10 of 20 total
Tests:       16 passed, 16 total
Snapshots:   1 obsolete, 5 passed, 5 total
Time:        2180 s

我不确定如何运行这个节点—— trace-police。看起来它是一个序列化问题，即使它只是一个警告，但不确定问题出在哪里。有没有更好的方法来找到异常

24188 次浏览
小开

Looks like the error is due to some async operation being done. Try wrapping your unit test inside a waitForAsync function.

小开

The issue was with the async operation, so writing the test case with below, solve the issue for me

describe('DateSelectionComponent', () => {
let component: DateSelectionComponent;
let fixture: ComponentFixture<DateSelectionComponent>;


beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DateSelectionComponent, SafePipe],
imports: [
SharedModule,
NgReduxTestingModule,
RouterTestingModule.withRoutes([])
],
providers: [
{
provide: PageAPIActions, useValue: { setPageState() { } }
}
]
}).compileComponents();
fixture = TestBed.createComponent(DateSelectionComponent);
component = fixture.componentInstance;


// Don't use Object.defineProperty when assigning value to class properties
component.page$ = of('value');
component.page = { destination: 'value' };
component.startDate = new NgbDate(2019, 2, 27);
component.minDate = new NgbDate(2019, 2, 27);
fixture.detectChanges();
}));


it('should create', () => {
expect(component).toBeTruthy();
});


it('Should Match Snapshot', () => {
expect(fixture.debugElement.nativeElement).toMatchSnapshot()
});
});
小开

In my situation, the cryptic error was triggered by not importing HttpClientModule into the test file. More details here.

小开

Adding my answer to help someone if missed. In my case i have missed to import

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Able to find the issue only when running one of the test case in isolation.

小开

Run jest with --detectOpenHandles. This will show you what is actually wrong with your test spec. For me, there were missing Angular Material imports and service mocks. You may be prompted to add the BrowserAnimationsModule, as Nambi alluded to in his answer

package.json:

"test": "jest --detectOpenHandles"
小开

I had this same issue when running jest with --watch. Removing --watch stopped the error.

小开

This message usually appears, if there is an error, that does not resolve into a standard exception.

As mentioned by @JamesBarret using jests detect open handle feature will provide you with a nice error message, telling you what the real problem behind this message is.

The handle --detectOpenHandles mentioned in the other message is deprecated though and was replaced with --detect-open-handles.

You can just use: (on your cli)

jest --detect-open-handles

Or in a package.json file:

"test": "jest --detect-open-handles"

Or as it was in my case an angular test:

ng test --detect-open-handles

提交答案