Stencil
Stencil は、再利用可能でスケーラブルなコンポーネントライブラリを構築するためのライブラリです。WebdriverIOとそのブラウザーランナーを使用して、実際のブラウザーでStencilコンポーネントを直接テストできます。
設定
Stencilプロジェクト内にWebdriverIOを設定するには、コンポーネントテストドキュメントの手順に従ってください。ランナーオプションでプリセットとして`stencil`を選択するようにしてください。例：
// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'stencil'
}],
// ...
}
ReactやVueなどのフレームワークとStencilを一緒に使用している場合は、これらのフレームワークのプリセットを維持する必要があります。
その後、次のコマンドを実行してテストを開始できます。
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
テスト対象のコンポーネントの配列。コンポーネントクラスはspecファイルにインポートできます。その後、参照を`component`配列に追加してテスト全体で使用します。
型: CustomElementConstructor[]
デフォルト: []
flushQueue
falseの場合、初期テスト設定でレンダリングキューをフラッシュしません。
型: boolean
デフォルト: true
template
テストを生成するために使用される初期JSX。HTML属性ではなくプロパティを使用してコンポーネントを初期化する場合にtemplateを使用します。指定されたテンプレート（JSX）をdocument.bodyにレンダリングします。
型: JSX.Template
html
型: string
テストを生成するために使用される初期HTML。これは、連携して動作するコンポーネントのコレクションを構築し、HTML属性を割り当てるのに役立ちます。
language
<html>でモックされたlang属性を設定します。
テストを生成するために使用される初期HTML。これは、連携して動作するコンポーネントのコレクションを構築し、HTML属性を割り当てるのに役立ちます。
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コンポーネントテストスイートの完全な例は、サンプルリポジトリにあります。
