Component test with library working with Jasmine Karma fails in Jest

[vespertilian]

🐛 Bug Report

Hi, thanks for this library.

So I have an issue where I was debugging Angular Formly and submitted a bug (via a repo) , and we got that fixed over the Christmas break.

So I tried to integrate the changes into my app (which uses JEST). Sadly it was not working. So I checked the original sample repo using Jasmine and it was working.

I am not sure why this will not work with Jest but does with Jasmine. It could be because I am using the library and is an IVY compatibility problem.

It's a fairly complex ball of code, which is why I want a spec to make sure my code is working with the Angular Formly code.

If it's an IVY problem and I just need to wait for some progress on #409, that's fine just wanted to log it because I have the sample and try to understand the root cause.

Any help greatly appreciated.

Wallaby JS give me this error:

	Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: [object Object]'.
		at src/app/mat-suffix/mat-suffix.spec.ts:73:5

Vanilla JEST gives me this error

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: [object Object]'.
		at src/app/mat-suffix/mat-suffix.spec.ts:73:5

To Reproduce

See repos run specs.

Expected behavior

See repo spec, components should render.

Link to repo (highly encouraged)

examples in formly-extension branch

https://github.com/vespertilian/angular-test-app-jasmine
https://github.com/vespertilian/angular-test-app-jest

checkout formly-extension branch

Error log:

(node:6194) 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:779:17)
    at process.target.send (internal/child_process.js:677:19)
    at reportSuccess (/Users/vespertilian/Code/angular-test-jest-app/node_modules/jest-runner/node_modules/jest-worker/build/workers/processChild.js:67:11)

envinfo

System:
    OS: Mac 11.1

Npm packages: see example repos

[ahnpnl]

Hi, you can try next tag to see if it helps :)

[ahnpnl]

ok I have checked the branch formly-extension branch, the issue is that you need to always run ngcc before runnning tests. This is required as similar to Jasmine.

With Jasmine, Angular CLI will start running ngcc first before running tests with Jasmine + Karma.

It's not really related to #409 , unless you encounter issues which were mentioned in 02d272e , you will need to use next tag.

[vespertilian]

@ahnpnl

Thanks for the quick reply, you are right running ngcc in the command line fixes it. 😃

Email me and I will PayPal you a beer or coffee. Just let me know how much.

Thanks again!

[wtho]

@vespertilian you can use https://buymeacoff.ee/ahnpnl, @ahnpnl definitely deserves the recognition, he is putting a ton of work into this library.

[vespertilian]

@wtho Thanks. @ahnpnl sent me his PayPal so it's already done 😃