`toHaveStyle` does not capture changes to element style in Jest30 (i.e. upgrading jsdom)

[md384]

• @testing-library/jest-dom version: 6.6.4
• node version: 22.17.0
• jest (or vitest) version: 30.0.5
• npm (or yarn) version: 4.9.2 (yarn)

Relevant code or config:

  it('changing style', () => {
    const element = document.createElement('div')
    element.style.color = 'black'

    expect(element.style.color).toBe('black')
    expect(element).toHaveStyle({color: 'black'})  // Might need to use `rgb(0, 0, 0)` depending on jsdom version
    expect(element).not.toHaveStyle({color: 'white'})
    
    element.style.color = 'white'
    
    expect(element.style.color).toBe('white')
    expect(element).toHaveStyle({color: 'white'})
    expect(element).not.toHaveStyle({color: 'black'})
  })

What you did:

On trying to upgrade Jest from 29 to 30 (and therefore jsdom from 20 to 26), my tests similar to the example above failed.

What happened:

The toHaveStyle check after changing the color fails with

Error: expect(element).toHaveStyle()

- Expected

- color: white;
+ color: black;

Reproduction:

Using

  "devDependencies": {
    "@testing-library/jest-dom": "^6.6.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0"
  },

the above test will pass.

It is enough to just force upgrade jsdom to a version >= 21, i.e.

  "resolutions": {
    "jsdom": "^21"
  },

to cause this problem - similarly upgrading jest and jest-environment-jsdom does the same thing since it will also upgrade jsdom.

I was unable to reproduce this in Codesandbox 🤷

Problem description:

I believe this issue is related to jsdom/jsdom#3502 and we end up with cached (and now incorrect) styles. However that issue suggests the jsdom is acting as it intends and is incompatible with the kind of test I am trying to do (and should be able to do).

Note, when forcing jsdom to version 20 (or less) with Jest30, the example test will pass so I'm sure this is jsdom related.

Suggested solution: