lit/lit

[lit-html] document mock check is too loose

开放

#4,855 创建于 2024年12月6日

 (0 条评论) (1 个反应) (0 位负责人)TypeScript (874 个派生)batch import
Contributions WelcomeGood First Issue

仓库指标

星标
 (16,966 个星标)
PR 合并指标
 (平均合并 8天 10小时) (30 天内合并 3 个 PR)

描述

Which package(s) are affected?

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

Description

When Stencil Jest unit tests are importing a lit-authored library, the following error occurs:

TypeError: r.createTreeWalker is not a function

https://github.com/lit/lit/blob/267d243aeec13a6f0e8184420919db4c519b8caf/packages/lit-html/src/lit-html.ts#L716

lit-html provides a small mock for createTreeWalker, but the mock is only provided if document is not defined:

https://github.com/lit/lit/blob/267d243aeec13a6f0e8184420919db4c519b8caf/packages/lit-html/src/lit-html.ts#L349-L356

In case of Stencil, mock document is provided, but the mock does not have createTreeWalker.

I understand that this mock is coming from Stencil rather than Lit, but Lit could do a better job of detecting whether document implements createTreeWalker:

-   NODE_MODE && global.document === undefined
+   NODE_MODE && typeof global.document?.createTreeWalker !== 'function'

Since this code is stripped from production browser bundle, it should not increase core bundle size.

Reproduction

  1. Open lit.dev
  2. See error in the console

Workaround

Create a Jest setup file with this code:

// jestSetup.js
document.createTreeWalker ??= () => ({});

and use that file in stencil.config.ts:

  testing: {
    setupFilesAfterEnv: ["<rootDir>/path/to/jestSetup.js"],
  },

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

lit-html 3.2.1

Browser/OS/Node environment

Node.js 20 Stencil 4.20.0

贡献者指南