SolidJS

SolidJS - это фреймворк для создания пользовательских интерфейсов с простой и производительной реактивностью. Вы можете тестировать компоненты SolidJS непосредственно в реальном браузере с помощью WebdriverIO и его браузерного запускателя.

Настройка

Чтобы настроить WebdriverIO в вашем проекте SolidJS, следуйте инструкциям в нашей документации по тестированию компонентов. Убедитесь, что вы выбрали solid в качестве пресета для вашего запускателя, например:

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

информация

Если вы уже используете Vite в качестве сервера разработки, вы также можете повторно использовать вашу конфигурацию из vite.config.ts в конфигурации WebdriverIO. Для получения дополнительной информации см. 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

В вашем тесте используйте метод render из solid-js/web, чтобы прикрепить компонент к тестовой странице. Для взаимодействия с компонентом мы рекомендуем использовать команды 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')
    })
})

Полный пример набора тестов компонентов WebdriverIO для SolidJS можно найти в нашем репозитории примеров.