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 组件测试套件的完整示例。