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.
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:
npm run test:detectOpenHandles or the equivalent jest --detectOpenHandlesFound the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
OR
Found the synthetic property @transitionMessages. Please include[...]
BrowserAnimationsModule or NoopAnimationsModule in your testI 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();
});
});