ssr-dom-shim in reactive-element is breaking test cases in vitest/happy-dom

[abbasc52]

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

as of v1.6.0 of reactive-element, it imports srr-dom-shim when environment is node.
When testing using dom emulation like happy-dom, it is loading the shim, which is causing test cases to fail.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-7rrc4s?file=package.json,test%2Fbasic.test.ts

Workaround

force @lit/reactive-element dependency version to 1.5.0

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

Failing with @lit/reactive-element 1.6.0, working with 1.5.0

Browser/OS/Node environment

OS: Windows 11
Node Version: 14.19
npm version: 6.14.17

[aomarks]

Thanks for filing!

Looks like this line from the Rollup config is not working as intended:

lit/rollup-common.js

Line 279 in 65e5665

'extends HTMLElement': 'extends (globalThis.HTMLElement ?? HTMLElement)',

The published code simply has extends HTMLElement instead of extends (globalThis.HTMLElement ?? HTMLElement).

Will try to get a fix out today.

[augustjk]

The fix for this is released with lit@2.6.1. Updating to the latest version in the stackblitgz repro above alleviates the original issue.

One of the assertion still fails

  it('should increment the count on each click', () => {
    getInsideButton()?.click()
    expect(getInsideButton()?.innerText).toContain('1')
  })

with the error

TypeError: childNode.textContent.replace is not a function

I think this is due to something with how happy-dom implements .innerText. Changing to

  it('should increment the count on each click', () => {
    getInsideButton()?.click()
    expect(getInsideButton()?.textContent).toContain('1')
  })

makes the test pass.