メインコンテンツにスキップ

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コンポーネントがある場合：

./components/Component.tsx
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コマンドを使用することをお勧めします：

app.test.tsx
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​

テストを生成するための初期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コンポーネントでプロパティや状態を定義する場合、これらの変更をコンポーネントに適用して再レンダリングするタイミングを管理する必要があります。

例​

WebdriverIOのStencilコンポーネントテストスイートの完全な例は、私たちのサンプルリポジトリにあります。

Welcome! How can I help?

WebdriverIO AI Copilot