“Converting circular structure to JSON” error in fully mocked Jest test

by

I have a function that returns a Promise:

  isKontoValid(): Promise<boolean> {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(
          !this.kontoComponent.form.invalid &&
            this.dataService.data.checkout.konto.hasSepaEinwilligung,
        );
      });
    });
  }

And this test for it:

it('should return true if kontoComponent form is valid and hasSepaEinwilligung is true', async () => {
  component.kontoComponent.form = { invalid: false } as any;
  component['dataService'].data.checkout.konto.hasSepaEinwilligung = true;
  expect(await component.isKontoValid()).toBeTruthy();
});

Despite everything the function uses I get this error:

● Test suite failed to run

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Zone'
    |     property '_zoneDelegate' -> object with constructor '_ZoneDelegate'
    --- property 'zone' closes the circle
    at stringify (<anonymous>)

I don’t really understand it, because, as I said, both this.kontoComponent.form.invalid and this.dataService.data.checkout.konto.hasSepaEinwilligung is mocked in the test. And there is also no conversion to JSON happening in the test nor the function.

I suppose I somehow handle the asynchrony wrong somehow!?

You can’t not use like this

it('should return true if kontoComponent form is valid and hasSepaEinwilligung is true', async () => {
  component.kontoComponent.form = { invalid: false } as any;
  component['dataService'].data.checkout.konto.hasSepaEinwilligung = true;
  expect(await component.isKontoValid()).toBeTruthy();
});

You can do like this and this works!

it('should return true if kontoComponent form is valid and hasSepaEinwilligung is true', async () => {
  component.kontoComponent.form = new FormGroup({
    yourFormName: new FormControl('',[Validators.required])
  });
  component['dataService'].data.checkout.konto.hasSepaEinwilligung = true;
  expect(await component.isKontoValid()).toBeTruthy();
});

Leave a Comment