UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON with Jest + Angular

Javascriptnode.jsAngularTypescriptJestjs

Javascript Problem Overview


Using the jest-preset-angular to perform the unit test, but got an warning as UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON not sure what causing the error, due to this the application is stuck and not running the other unit test.

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

I am not sure how to run the node --trace-warnings. Looks like it a serialization issue, even it is just a warning but not sure where is the issue. Is there any better way to find the exception

Javascript Solutions


Solution 1 - Javascript

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"

Solution 2 - Javascript

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

Solution 3 - Javascript

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.

Solution 4 - Javascript

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()
  });
});

Solution 5 - Javascript

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

Solution 6 - Javascript

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

Solution 7 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSan JaisyView Question on Stackoverflow
Solution 1 - JavascriptJames BarrettView Answer on Stackoverflow
Solution 2 - JavascriptSimonEritschView Answer on Stackoverflow
Solution 3 - JavascriptNambi N RajanView Answer on Stackoverflow
Solution 4 - JavascriptSan JaisyView Answer on Stackoverflow
Solution 5 - JavascriptAvi KaminetzkyView Answer on Stackoverflow
Solution 6 - JavascriptBrian McGoughView Answer on Stackoverflow
Solution 7 - JavascriptAnatolie DariiView Answer on Stackoverflow