bug: component unit tests error when updating to 4.23.1

[amylo]

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.23.1

Current Behavior

When a component has the class attribute bound to a value that can return null, for example:

getClassnames(): string {
  const classes = [];
  if (this.disablePadding) {
    classes.push('my-app-footer-disable-padding');
  }
  if (this.showShadow || this.hasMenubar) {
    classes.push('my-app-footer-has-shadow');
  }
  return classes.join(' ') || null;
}
render() {
    return (
      <Host class={this.getClassnames()}>
        <ion-footer
          class="ion-no-border"
        >
         <slot />
        </ion-footer>
      </Host>
  );
}

The unit tests for Stencil components throws this error.

[33:45.2] jest args: --spec --e2e --max-workers=8
FAIL src/components/my-component/my-component.spec.ts
● my-component › renders

TypeError: Cannot use 'in' operator to search for 'baseVal' in null

  at parseClassList (node_modules/@stencil/core/internal/testing/index.js:860:46)
  at setAccessor (node_modules/@stencil/core/internal/testing/index.js:754:24)
  at updateElement (node_modules/@stencil/core/internal/testing/index.js:884:5)
  at patch (node_modules/@stencil/core/internal/testing/index.js:1205:9)
  at renderVdom (node_modules/@stencil/core/internal/testing/index.js:1360:3)
  at callRender (node_modules/@stencil/core/internal/testing/index.js:2523:11)
  at updateComponent (node_modules/@stencil/core/internal/testing/index.js:2463:5)
  at node_modules/@stencil/core/internal/testing/index.js:2441:38
  at enqueue (node_modules/@stencil/core/internal/testing/index.js:2446:6)
  at dispatchHooks (node_modules/@stencil/core/internal/testing/index.js:2441:10)
  at dispatch (node_modules/@stencil/core/internal/testing/index.js:2405:26)
  at drain (node_modules/@stencil/core/internal/testing/index.js:228:28)

PASS utils/utils.spec.ts

Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 failed, 4 passed, 5 total
Snapshots: 0 total
Time: 0.665 s, estimated 1 s
Ran all test suites.

Expected Behavior

The potential null should be gracefully handled.

Running the unit tests for Stencil components should not have error: TypeError: Cannot use 'in' operator to search for 'baseVal' in null

System Info

System: node 21.6.0
    Platform: darwin (23.6.0)
   CPU Model: Apple M2 Pro (10 cpus)
    Compiler: /Users/alo/Desktop/test/stenciltest-4-23-1/node_modules/@stencil/core/compiler/stencil.js
       Build: 1736187268
     Stencil: 4.23.1 🌯
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

1. Install @stencil/core@4.23.1
2. Create a component that binds HTML class attribute to a function that can potentially return null
3. Run stencil test --spec

Code Reproduction URL

https://github.com/amylo/stenciltest-4-23-1/tree/main

Additional Information

Looks like this issue may have been introduced by this change: https://github.com/ionic-team/stencil/pull/6085/files#diff-7f05c2f1645c35f29f698766956966cc2b5d915b37004316adfb635648ce9a62R204

[christian-bromann]

Thanks for raising the issue. A fix was pushed and will be released within the next version of Stencil.

[christian-bromann]

A fix for this has been released today as part of Stencil v4.25.1!