SolidJS

SolidJS是一个用于构建具有简单高效响应式的用户界面的框架。您可以使用WebdriverIO及其浏览器运行器直接在真实浏览器中测试SolidJS组件。

设置

要在SolidJS项目中设置WebdriverIO，请按照我们组件测试文档中的说明进行操作。确保在运行器选项中选择solid作为预设，例如：

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

信息

如果您已经使用Vite作为开发服务器，您也可以在WebdriverIO配置中重用vite.config.ts中的配置。有关更多信息，请参阅运行器选项中的viteConfig。

SolidJS预设需要安装vite-plugin-solid：

npm

npm install --save-dev vite-plugin-solid

Yarn

yarn add --dev vite-plugin-solid

pnpm

pnpm add --save-dev vite-plugin-solid

Bun

bun add --dev vite-plugin-solid

然后，您可以通过运行以下命令启动测试：

npx wdio run ./wdio.conf.js

编写测试

假设您有以下SolidJS组件：

./components/Component.tsx

import { createSignal } from 'solid-js'

function App() {
    const [theme, setTheme] = createSignal('light')

    const toggleTheme = () => {
        const nextTheme = theme() === 'light' ? 'dark' : 'light'
        setTheme(nextTheme)
    }

    return <button onClick={toggleTheme}>
        Current theme: {theme()}
    </button>
}

export default App

在您的测试中，使用solid-js/web中的render方法将组件附加到测试页面。为了与组件交互，我们建议使用WebdriverIO命令，因为它们的行为更接近实际用户交互，例如：

app.test.tsx

import { expect } from '@wdio/globals'
import { render } from 'solid-js/web'

import App from './components/Component.jsx'

describe('Solid Component Testing', () => {
    /**
     * ensure we render the component for every test in a
     * new root container
     */
    let root: Element
    beforeEach(() => {
        if (root) {
            root.remove()
        }

        root = document.createElement('div')
        document.body.appendChild(root)
    })

    it('Test theme button toggle', async () => {
        render(<App />, root)
        const buttonEl = await $('button')

        await buttonEl.click()
        expect(buttonEl).toContainHTML('dark')
    })
})

您可以在我们的示例仓库中找到SolidJS的WebdriverIO组件测试套件的完整示例。