Stencil
Stencil 是一个用于构建可重用、可扩展组件库的库。您可以使用 WebdriverIO 及其浏览器运行器在真实的浏览器中直接测试 Stencil 组件。
设置
要在 Stencil 项目中设置 WebdriverIO，请遵循组件测试文档中的说明。确保在运行器选项中选择stencil作为预设，例如：
// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'stencil'
}],
// ...
}
如果您将 Stencil 与 React 或 Vue 等框架一起使用，则应保留这些框架的预设。
然后，您可以通过运行以下命令启动测试
npx wdio run ./wdio.conf.ts
编写测试
假设您有以下 Stencil 组件
import { Component, Prop, h } from '@stencil/core'
@Component({
tag: 'my-name',
shadow: true
})
export class MyName {
@Prop() name: string
normalize(name: string): string {
if (name) {
return name.slice(0, 1).toUpperCase() + name.slice(1).toLowerCase()
}
return ''
}
render() {
return (
<div class="text">
<p>Hello! My name is {this.normalize(this.name)}.</p>
</div>
)
}
}
render
在您的测试中，使用来自@wdio/browser-runner/stencil的render方法将组件附加到测试页面。为了与组件交互，我们建议使用 WebdriverIO 命令，因为它们的行为更接近实际的用户交互，例如：
import { expect } from '@wdio/globals'
import { render } from '@wdio/browser-runner/stencil'
import MyNameComponent from './components/Component.tsx'
describe('Stencil Component Testing', () => {
it('should render component correctly', async () => {
await render({
components: [MyNameComponent],
template: () => (
<my-name name={'stencil'}></my-name>
)
})
await expect($('.text')).toHaveText('Hello! My name is Stencil.')
})
})
渲染选项
render方法提供了以下选项
components
要测试的组件数组。组件类可以导入到规范文件中，然后将它们的引用添加到component数组中，以便在整个测试中使用。
类型：CustomElementConstructor[]
默认值：[]
flushQueue
如果为false，则在初始测试设置时不刷新渲染队列。
类型：boolean
默认值：true
template
用于生成测试的初始 JSX。当您想使用组件的属性而不是它们的 HTML 属性来初始化组件时，请使用template。它会将指定的模板 (JSX) 渲染到document.body中。
类型：JSX.Template
html
用于生成测试的初始 HTML。这对于构建一起工作的组件集合并分配 HTML 属性很有用。
类型：string
language
在<html>上设置模拟的lang属性。
类型：string
autoApplyChanges
默认情况下，对组件属性和属性的任何更改都必须env.waitForChanges()才能测试更新。作为一种选择，autoApplyChanges会在后台持续刷新队列。
类型：boolean
默认值：false
attachStyles
默认情况下，样式不会附加到 DOM，并且不会反映在序列化后的 HTML 中。将此选项设置为true会将组件的样式包含在可序列化输出中。
类型：boolean
默认值：false
渲染环境
render方法返回一个环境对象，该对象提供某些实用程序帮助程序来管理组件的环境。
flushAll
对组件进行更改后，例如更新属性或属性，测试页面不会自动应用这些更改。要等待并应用更新，请调用await flushAll()
类型：() => void
unmount
从 DOM 中移除容器元素。
类型：() => void
styles
组件定义的所有样式。
类型：Record<string, string>
container
渲染模板的容器元素。
类型：HTMLElement
$container
作为 WebdriverIO 元素的容器元素。
类型：WebdriverIO.Element
root
模板的根组件。
类型：HTMLElement
$root
作为 WebdriverIO 元素的根组件。
类型：WebdriverIO.Element
waitForChanges
用于等待组件准备就绪的帮助程序方法。
import { render, waitForChanges } from '@wdio/browser-runner/stencil'
import { MyComponent } from './component.tsx'
const page = render({
components: [MyComponent],
html: '<my-component></my-component>'
})
expect(page.root.querySelector('div')).not.toBeDefined()
await waitForChanges()
expect(page.root.querySelector('div')).toBeDefined()
元素更新
如果您在 Stencil 组件中定义了属性或状态，则必须管理何时将这些更改应用于组件以重新渲染。
示例
您可以在我们的示例存储库中找到 Stencil 的 WebdriverIO 组件测试套件的完整示例。
