bug: Unexpected behavior with spec test executing code after test statement

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

v3.0.0

Current Behavior

When a component has a setTimeout constructed in the connectedCallback, that is later cleared in the disconnectedCallback; writing a spec test for that component will lead to code executing after the test has completed. This results in different errors.

Using a log statement will provide:

Cannot log after tests are done. Did you forget to wait for something async in your test?

Depending on the complexity of the code, you can either receive an error pointing to the problematic code:

 RUNS  src/components/my-component/my-component.spec.tsx
/Users/sean/Documents/ionic/issues/stencil-jest-instance-value/src/components/my-component/my-component.tsx:21
    const options = this.col.options;

or you may receive an error for the $instanceValues$:

TypeError: Cannot read properties of undefined (reading '$instanceValues$')

This occurs in the Ionic Framework, with the ion-picker-column component (observed here: ionic-team/ionic-framework#26749). In that PR, I had to split the test criteria into two separate files, to workaround the issue. The provided repository below is a slimmed down example of what the ion-picker-column component is doing.

Expected Behavior

When a test has finished, the component should be "disconnected"/torn down and no code should continue to execute.

System Info

Node: v16.15.1
npm: v8.19.1

Steps to Reproduce

1. Clone the reproduction example
2. Build the reproduction example npm run build
3. Run the spec tests: npm run test -- --no-build
4. Observe:
   • my-component-a.spec.tsx passes, with an error
   • my-component-b.spec.tsx does not run
   • my-component.spec.tsx runs, but throws an exception
5. In my-component-a.spec.tsx, comment in line 23, which manually calls the disconnectedCallback (after the test has performed its expect statement)
6. Run the spec tests: npm run test -- --no-build
7. Observe:
   • my-component-a.spec.tsx passes, without an error
   • my-component-b.spec.tsx passes, with an error
   • my-component-spec.tsx runs, but throws an exception

my-component-a.spec.tsx and my-component-b.spec.tsx perform the same test. my-component-spec.tsx is an example of how the error changes when you have two tests in a single file (multiple it statements).

Code Reproduction URL

https://github.com/sean-perkins/stencil-jest-instance-value

Additional Information

I am unsure if it is the responsibility of the component author to manually invoke the disconnectedCallback after the test. Please advise if this is an implementation issue or if Stencil should be tearing down the component in this scenario.

[rwaskiewicz]

👋

The fix for this issue has been included in the 🏒 v3.2.2 release of Stencil, which was released earlier today. As a result, I'm going to close this issue. Should it reappear, please feel free to open a new issue. Thanks!