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

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

Yarn

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

pnpm

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 元件測試套件範例。