测试

测试能确保你的代码按预期运行，并让你避免繁琐的调试工作。

查看 入门套件 文档，了解一个易于使用的、预配置完整的测试环境设置，它非常适合测试 Lit 组件。

Lit 是一个标准的现代 JavaScript 库，你可以使用几乎任何 JavaScript 测试框架来测试你的 Lit 代码。有许多流行的选择，包括 Jest、Karma、Mocha、Jasmine、WebdriverIO 和 Web Test Runner。

为了有效地测试你的 Lit 代码，你需要确保你的测试环境支持以下几点。

Lit 组件是为在浏览器中运行而设计的，所以测试应该在浏览器环境中进行。专门用于测试 node 代码的工具可能不太适合。

你使用的测试环境必须支持使用现代 JavaScript，包括使用裸模块说明符的模块，或者适当地降级现代 JavaScript。更多详情请参见 旧版浏览器的要求 文档。

要在旧版浏览器上进行测试，你的测试环境需要加载一些 polyfills，包括 web components polyfills 和 Lit 的 polyfill-support 模块。更多详情请参见 Polyfills 文档。

Web Test Runner 是专门为测试像 Lit 这样的现代 web 库而设计的，它支持自定义元素和 Shadow DOM 等现代 web 特性。请参阅 Web Test Runner 的 入门指南。

为了支持旧版浏览器，你需要按如下方式配置 Web Test Runner：

安装 @web/dev-server-legacy：

npm i @web/dev-server-legacy --save-dev

设置 web-test-runner.config.js：

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  /* ... */
  plugins: [
    // 确保这个插件始终是最后一个
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // 在测试文件中注入 lit 的 polyfill-support 模块，这是与
        // webcomponents polyfills 交互所必需的
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

WebdriverIO 是组件测试或端到端测试的好选择。它有非常令人信服的优势，比如支持 模拟 和 代码覆盖率 报告。

你可以通过以下方式在项目中设置 WebdriverIO：

npm init wdio@latest ./

它会启动一个配置向导，引导你回答一些问题。确保选择以下选项：

• 你想进行什么类型的测试？
  组件或单元测试 - 在浏览器中
• 你使用哪个框架来构建组件？
  Lit

其余问题可以根据需要回答。

要测试组件，你必须在测试开始前将其渲染到测试页面中，并确保之后进行清理：

import { expect, $ } from '@wdio/globals'

// Component.ts 包含 <simple-greeting> 组件，实现方式与以下示例相同：
// https://lit.tips/docs/components/overview/
import './components/Component.ts'

describe('Lit Component testing', () => {
    let elem: HTMLElement

    beforeEach(() => {
        elem = document.createElement('simple-greeting')
    })

    it('should render component', async () => {
        elem.setAttribute('name', 'WebdriverIO')
        document.body.appendChild(elem)
        await expect($(elem)).toHaveText('Hello, WebdriverIO!')
    })

    afterEach(() => {
        elem.remove()
    })
})

在 WebdriverIO 文档中查找更多关于 元素断言、在 Shadow DOM 中查找元素 和 更多 的信息。