Test suite failed to run TypeError: Converting circular structure to JSON

user_11802152 0
Viewed 3279

I encountered a mysterious bug while executing tests in Angular using jest.

It reads

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

or some variation of that error.

I found a fix for this, look at the answer below.

angular jestjs
1 Answers

It appears that this is some kind of internal jest error. After reading about similar issues on the jestjs Github page, I managed to find following fix/workaround:

  1. Run npm run test:detectOpenHandles or the equivalent jest --detectOpenHandles
  2. Error now reads

Found the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

OR

Found the synthetic property @transitionMessages. Please include[...]

  1. To fix, import BrowserAnimationsModule or NoopAnimationsModule in your test

I don't know what the above errors are caused by though. Hopefully this helps.

EDIT: Here is an example TestBed configuration from my current project:

import { TestBed } from '@angular/core/testing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { AppBarComponent } from './components/app-bar/app-bar.component';
import { SideNavComponent } from './components/side-nav/side-nav.component';
import { AngularMaterialModule } from './modules/angular-material.module';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        AngularMaterialModule,
        BrowserAnimationsModule
      ],
      declarations: [
        AppComponent,
        AppBarComponent,
        SideNavComponent
      ],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});
user_118021520
Related