测试

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

参见入门套件文档，了解如何轻松设置一个预配置的测试环境，非常适合测试 Lit 组件。

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

您需要确保您的测试环境支持一些功能，以便有效地测试您的 Lit 代码。

Lit 组件设计为在浏览器中运行，因此测试应该在浏览器环境中进行。专门针对测试node 代码的工具可能不适合。

您使用的测试环境必须支持使用现代 JavaScript，包括使用带有裸模块说明符的模块，或者适当地降低现代 JavaScript 的级别。有关更多详细信息，请参见旧版浏览器需求文档。

要在旧版浏览器上进行测试，您的测试环境需要加载一些 polyfill，包括Web 组件 polyfill 和 Lit 的 polyfill-support 模块。有关更多详细信息，请参见Polyfill 文档。

Web Test Runner 专为使用现代 Web 功能（如自定义元素和 Shadow DOM）测试 Lit 等现代 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: [
    // make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the 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 contains the <simple-greeting> component implemented the same as:
// https://lit.npmjs.net.cn/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 中查找元素 和更多内容。

编辑此页面