SolidJS

SolidJS 是一個使用簡單且高效能的反應式 UI 建構框架。您可以使用 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

然後，您可以執行以下指令來啟動測試

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