bug: get undefined on updated State value on test when create page in beforeAll

[jjmato]

Prerequisites

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

Stencil Version

4.7.0

Current Behavior

 FAIL  src/components/my-component/my-component.spec.ts
  ● my-component › test error

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

      27 |   @Listen('ChangeValue')
      28 |   onChangeValue(event: CustomEvent<string>) {
    > 29 |     this.stateValue = event.detail;
         |                    ^
      30 |   }
      31 |
      32 |   render() {

      at setValue (node_modules/@stencil/core/internal/testing/index.js:541:58)
      at MyComponent.set [as stateValue] (node_modules/@stencil/core/internal/testing/index.js:589:6)
      at MyComponent.onChangeValue (src/components/my-component/my-component.tsx:29:20)
      at p.<anonymous> (node_modules/@stencil/core/internal/testing/index.js:930:65)
      at node_modules/@stencil/core/mock-doc/index.cjs:714:34
          at Array.forEach (<anonymous>)
      at triggerEventListener (node_modules/@stencil/core/mock-doc/index.cjs:712:19)
      at dispatchEvent (node_modules/@stencil/core/mock-doc/index.cjs:733:5)
      at p.dispatchEvent (node_modules/@stencil/core/mock-doc/index.cjs:3400:16)
      at Object.<anonymous> (src/components/my-component/my-component.spec.ts:20:10)

Expected Behavior

get green test passed

System Info

$ npx stencil info

      System: node 18.17.1
    Platform: windows (10.0.22621)
   CPU Model: 12th Gen Intel(R) Core(TM) i7-1265U (12 cpus)
    Compiler: C:\Users\[USERNAME]\workspace\banana\node_modules\@stencil\core\compiler\stencil.js
       Build: 1706543579
     Stencil: 4.12.0
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.27.0

Steps to Reproduce

1. create proyect
2. create state in component
3. create Listen in component
4. create page in beforeAll
5. create test for Listen
6. run test

Code Reproduction URL

https://github.com/jjmato/stencil-error-example

Additional Information

No response

[rwaskiewicz]

Thanks! I've confirmed something isn't quite right here. In the interim, if you can use beforeEach to suite your needs, that's the best workaround I have at the moment.

I'm going to label this to get it ingested into our backlog.

[tanner-reits]

Hi @jjmato, little update for ya.

I took a look into what is going on here and identified why the beforeEach setup works while beforeAll fails. Unfortunately, fixing this can result in breaking changes in test execution so this isn't something we'll be able to resolve until Stencil v5 (date TBD).

Sorry for the inconvenience, but we'll get this resolved as soon as we're able.

[sugerzzx]

Hi @jjmato, little update for ya.

I took a look into what is going on here and identified why the beforeEach setup works while beforeAll fails. Unfortunately, fixing this can result in breaking changes in test execution so this isn't something we'll be able to resolve until Stencil v5 (date TBD).

Sorry for the inconvenience, but we'll get this resolved as soon as we're able.

Hello @tanner-reits. I wonder if this situation below is the same reseon to that, same got pass in beforeEach but fail in beforeAll:

describe('my-component', () => {
  let page: SpecPage;
  beforeAll(async () => {
    page = await newSpecPage({
      components: [MyComponent],
      html: '<my-component></my-component>',
    });
  });
  it('renders', async () => {
    expect(page.root).toBeTruthy();
  });
});

the test fails with the following error:

 FAIL  src/components/my-component/test/my-component.spec.tsx
  my-component
    × renders (8 ms)

  ● my-component › renders

    expect(received).toBeTruthy()

    Received: null

      76 |   });
      77 |   it('renders', async () => {
    > 78 |     expect(page.root).toBeTruthy();
         |                       ^
      79 |   });
      80 | });

      at Object.<anonymous> (src/components/my-component/test/my-component.spec.tsx:78:23)

Thank you for your time.