SolidJS

SolidJS è un framework per costruire interfacce utente con reattività semplice e performante. Puoi testare i componenti SolidJS direttamente in un browser reale utilizzando WebdriverIO e il suo browser runner.

Setup

Per configurare WebdriverIO all'interno del tuo progetto SolidJS, segui le istruzioni nella nostra documentazione sui test dei componenti. Assicurati di selezionare solid come preset nelle tue opzioni di runner, ad esempio:

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

informazione

Se stai già utilizzando Vite come server di sviluppo, puoi anche riutilizzare la tua configurazione in vite.config.ts all'interno della configurazione WebdriverIO. Per maggiori informazioni, vedi viteConfig nelle opzioni del runner.

Il preset SolidJS richiede l'installazione di 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

Puoi quindi avviare i test eseguendo:

npx wdio run ./wdio.conf.js

Scrivere i test

Supponiamo che tu abbia il seguente componente 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

Nel tuo test utilizza il metodo render da solid-js/web per collegare il componente alla pagina di test. Per interagire con il componente, raccomandiamo di utilizzare i comandi WebdriverIO poiché si comportano in modo più simile alle interazioni utente reali, ad esempio:

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')
    })
})

Puoi trovare un esempio completo di una suite di test dei componenti WebdriverIO per SolidJS nel nostro repository di esempi.