ionic-team/stencil-store

Type error when running tests for component with onChange listener.

samshareski opened this issue · 2 comments

When a component has an onChange listener which has a function that manipulates a @State property:

import { onChange } from '../a-store';

export class AppProfile { 
  @State() something = 0;

  componentWillLoad() {
    onChange('clicks', (value) => {
      this.something++;
    });
  }
...
}

when I try to unit test the component I get a type error like:

 ● app-profile › clicks the button again

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

      12 |   componentWillLoad() {
      13 |     onChange('clicks', (value) => {
    > 14 |       this.something++;
         |       ^
      15 |     });
      16 |   }
      17 |   

      at getValue (node_modules/@stencil/core/internal/testing/index.js:538:282)
      at AppProfile.get [as something] (node_modules/@stencil/core/internal/testing/index.js:565:13)
      at src/components/app-profile/app-profile.tsx:14:7
      at node_modules/@stencil/store/dist/index.js:144:43
      at node_modules/@stencil/store/dist/index.js:88:40
          at Array.forEach (<anonymous>)
      at reset (node_modules/@stencil/store/dist/index.js:88:24)
      at Object.dispose (node_modules/@stencil/store/dist/index.js:94:9)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:7:5)

The error only occurs if I'm referencing a @State property, if I reference a component method that just logs something, for example, there is no error.

However, this error doesn't happen with the first test in the suite, only subsequent tests. I'm calling store.dispose() before each test.

I reproduced this error on a fresh npm init stencil project with npm install @stencil/store added.

Hey @samshareski 👋

Can you please open a new issue using our bug report template, and include a reproduction case URL for the team to pull down? Thank you!

Thanks for the issue! It appears that you have not filled out the provided issue template. We use this issue template in order to gather more information and further assist you. Please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil Store!