bug: Jest 30 - random jquery IDs in testing snapshots won't match

[bmerigan]

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

Current Behavior

expect(element).toMatchSnapshot();

The stored snapshot contains random jQuery IDs which appear to be generated by the Stencil mocking library as part of MockHTMLElement.
These random numbers change with every test run, so the snapshot cannot match.

-   "jQuery400935201170896410665512565": {
+  "jQuery4009352011702744511468456572": {
       "parentNode": [
           90,
           1,
           true,
        ],
    }

This started being an issue upon trying to switch Stencil tests to Jest 30.
IMO the MockHTMLElement data should not be in the snapshot.

Expected Behavior

Snapshots should match when nothing is changed.
IMO the MockHTMLElement data should not be in the snapshot. It looks like a straight console.log(element).

System Info

Jest 30.1.3  
System: node 22.12.0  
Platform: windows (10.0.19045)  
Compiler: C:\dev-launchpad\sync-v2\masternav\app\node_modules\@stencil\core\compiler\stencil.js  
Build: 1755687753  
Stencil: 4.36.3  
TypeScript: 5.5.4  
Rollup: 4.34.9  
Parse5: 7.2.1  
jQuery: 4.0.0-pre  
Terser: 5.37.0

Steps to Reproduce

abbreviated spec file contents:

import { newSpecPage } from 'jest-stencil-runner';  

basePage = newSpecPage({
  components: [MyHeader],
  html: '<my-header></my-header>'
});
let page = await basePage;
const searchBar = page.root.shadowRoot.querySelector('.search-container');
expect(searchBar).toMatchSnapshot();

npm run jest
npm run jest
› 1 snapshot failed.

Code Reproduction URL

https://github.com/stenciljs/core/not-jest-30

Additional Information

Relevant package.json contents:

    "@stencil/core": "^4.36.1",
    "@types/jest": "^30.0.0",
    "@types/node": "^22.18.0",
    "jest": "^30.1.3",
    "jest-cli": "^30.1.3",
    "jest-stencil-runner": "^0.0.8",
    "puppeteer": "^24.18.0"

Also it would be good to see the starter templates updated to use the latest version of Jest too. I feel like an early adopter and that StencilJs is not ready for Jest 30 yet.

[johnjenkins]

hey @bmerigan - can you make minimal repro please 🙏
Would make this much easier to diagnose and fix - tysm!

[bmerigan]

Potentially can do tomorrow.
If there was a starter template with the latest Jest it would pretty much match it.