bug: spec.tsx tests fire false waring about "Prop is immutable but was modified from within the component"

[Jagget]

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

4.24.0

Current Behavior

spec.tsx tests fire false waring about "Prop is immutable but was modified from within the component"

Expected Behavior

No false warning

System Info

      System: node 22.13.0
    Platform: darwin (23.6.0)
   CPU Model: Apple M2 Pro (12 cpus)
       Build: 1737085023
     Stencil: 4.24.0 🚜
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Component:

@Component({
  tag: 'inner-one',
  shadow: true,
})
export class InnerOne implements ComponentInterface {
  @Prop() name = 'Boom!';

  @Prop({ reflect: true }) selectedIndex = -1;

  render() {
    return (
      <Host>
        <div class="blue-text">{this.name}</div>
        <div class="blue">{this.selectedIndex}</div>
      </Host>
    );
  }
}

the test:

describe('inner-one', () => {
  it('should render', async () => {
    const page = await newSpecPage({
      components: [InnerOne],
      template: () => {
        return <inner-one selectedIndex={1} />;
      },
    });

    const componentEl = page.body.getElementsByTagName('inner-one')[0] as HTMLInnerOneElement;

    expect(componentEl).not.toBeNull();

    const B1 = componentEl?.shadowRoot?.querySelector('div.blue');
    expect(B1?.innerHTML).toEqual('1');

    componentEl.selectedIndex = 0;
    await page.waitForChanges();

    const B = componentEl?.shadowRoot?.querySelector('div.blue');
    expect(B?.innerHTML).toEqual('0');
  });

  it('should render', async () => {
    const page = await newSpecPage({
      components: [InnerOne],
      template: () => {
        return <inner-one selectedIndex={1} />;
      },
    });

    const componentEl = page.body.getElementsByTagName('inner-one')[0] as HTMLInnerOneElement;

    expect(componentEl).not.toBeNull();

    const B1 = componentEl?.shadowRoot?.querySelector('div.blue');
    expect(B1?.innerHTML).toEqual('1');

    componentEl.selectedIndex = 2;
    await page.waitForChanges();

    const B = componentEl?.shadowRoot?.querySelector('div.blue');
    expect(B?.innerHTML).toEqual('2');
  });
});

Message:

    console.warn
      @Prop() "selectedIndex" on <inner-one> is immutable but was modified from within the component.
      More information: https://stenciljs.com/docs/properties#prop-mutability

      41 |     expect(B1?.innerHTML).toEqual('1');
      42 |
    > 43 |     componentEl.selectedIndex = 2;
         |                              ^
      44 |     await page.waitForChanges();
      45 |
      46 |     const B = componentEl?.shadowRoot?.querySelector('div.blue');

      at consoleDevWarn (node_modules/@stencil/core/internal/testing/index.js:162:11)
      at InnerOne.set (node_modules/@stencil/core/internal/testing/index.js:2882:17)
      at InnerOne.set [as selectedIndex] (node_modules/@stencil/core/internal/testing/index.js:2895:26)
      at setterSetVal (node_modules/@stencil/core/internal/testing/index.js:2921:48)
      at HostElement.set [as selectedIndex] (node_modules/@stencil/core/internal/testing/index.js:2925:17)
      at Object.<anonymous> (src/components/inner-one/inner-one.spec.tsx:43:30)

!Important info!
Only the second test fires the warning, if you change the tests order, then which one is the second will fire warning. If you remove the second test - there's no warning.

It does not matter if the tests are in the same "describe" or in different ones. Also, if there are more than 2 tests, then 2nd, 3rd, ... will fire the warning

Code Reproduction URL

No response

Additional Information

at InnerOne.set calls appear repeated. There are two in the second test warning, 3 in the third test warning, and 4 in the 4th.

[johnjenkins]

This one can be closed too @christian-bromann 🙂

[christian-bromann]

Thanks @johnjenkins