Svelte

Svelteは、ユーザーインターフェース構築に対する画期的な新しいアプローチです。ReactやVueのような従来のフレームワークは、ブラウザで大部分の作業を実行しますが、Svelteはアプリをビルドする際に発生するコンパイルステップにその作業をシフトします。WebdriverIOとそのブラウザランナーを使用して、実際のブラウザでSvelteコンポーネントを直接テストできます。

設定

Svelteプロジェクト内にWebdriverIOを設定するには、コンポーネントテストドキュメントの手順に従ってください。ランナーオプション内でプリセットとしてsvelteを選択してください。例：

// wdio.conf.js
export const config = {
    // ...
    runner: ['browser', {
        preset: 'svelte'
    }],
    // ...
}

情報

開発サーバーとしてViteを既に使用している場合、WebdriverIOの設定でvite.config.ts内の設定を再利用することもできます。詳細については、ランナーオプションのviteConfigを参照してください。

Svelteプリセットには、@sveltejs/vite-plugin-svelteのインストールが必要です。また、コンポーネントをテストページにレンダリングするためにTesting Libraryを使用することをお勧めします。そのため、次の追加の依存関係をインストールする必要があります。

npm
Yarn
pnpm

npm install --save-dev @testing-library/svelte @sveltejs/vite-plugin-svelte

yarn add --dev @testing-library/svelte @sveltejs/vite-plugin-svelte

pnpm add --save-dev @testing-library/svelte @sveltejs/vite-plugin-svelte

テストを開始するには、以下を実行します。

npx wdio run ./wdio.conf.js

テストの記述

次のSvelteコンポーネントがあるとします。

./components/Component.svelte
<script>
    export let name

    let buttonText = 'Button'

    function handleClick() {
      buttonText = 'Button Clicked'
    }
</script>

<h1>Hello {name}!</h1>
<button on:click="{handleClick}">{buttonText}</button>

テストでは、@testing-library/svelteのrenderメソッドを使用して、コンポーネントをテストページにアタッチします。コンポーネントと対話するには、実際のユーザーインタラクションにより近い動作をするWebdriverIOコマンドを使用することをお勧めします。例：

svelte.test.js
import expect from 'expect'

import { render, fireEvent, screen } from '@testing-library/svelte'
import '@testing-library/jest-dom'

import Component from './components/Component.svelte'

describe('Svelte Component Testing', () => {
    it('changes button text on click', async () => {
        render(Component, { name: 'World' })
        const button = await $('button')
        await expect(button).toHaveText('Button')
        await button.click()
        await expect(button).toHaveText('Button Clicked')
    })
})

SvelteのWebdriverIOコンポーネントテストスイートの完全な例は、例のリポジトリにあります。

設定​

テストの記述​

設定

テストの記述