Lit

Lit 是一个用于构建快速、轻量级 Web 组件的简单库。由于 WebdriverIO 的Shadow DOM 选择器，使用 WebdriverIO 测试 Lit Web 组件非常容易，您可以使用单个命令查询 Shadow 根嵌套元素。

设置

要在 Lit 项目中设置 WebdriverIO，请遵循组件测试文档中的说明。对于 Lit，您不需要预设，因为 Lit Web 组件不需要通过编译器运行，它们是纯 Web 组件增强。

设置完成后，您可以通过运行以下命令启动测试

npx wdio run ./wdio.conf.js

编写测试

假设您有以下 Lit 组件

./components/Component.ts

import { LitElement, css, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
    @property()
    name?: string = 'World'

    // Render the UI as a function of component state
    render() {
        return html`<p>Hello, ${this.name}!</p>`
    }
}

为了测试组件，您必须在测试开始之前将其渲染到测试页面，并确保之后将其清理。

lit.test.js

import expect from 'expect'
import { waitFor } from '@testing-library/dom'

// import Lit component
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 waitFor(() => {
            expect(elem.shadowRoot.textContent).toBe('Hello, WebdriverIO!')
        })
    })

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

您可以在我们的示例存储库中找到 Lit 的 WebdriverIO 组件测试套件的完整示例。