SolidJS

SolidJS es un framework para construir interfaces de usuario con reactividad simple y de alto rendimiento. Puedes probar componentes de SolidJS directamente en un navegador real usando WebdriverIO y su ejecutor de navegador.

Configuración

Para configurar WebdriverIO dentro de tu proyecto SolidJS, sigue las instrucciones en nuestra documentación de pruebas de componentes. Asegúrate de seleccionar solid como preset dentro de tus opciones de ejecutor, por ejemplo:

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

información

Si ya estás usando Vite como servidor de desarrollo, también puedes reutilizar tu configuración en vite.config.ts dentro de tu configuración de WebdriverIO. Para más información, consulta viteConfig en opciones del ejecutor.

El preset de SolidJS requiere que vite-plugin-solid esté instalado:

npm

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

Yarn

yarn add --dev vite-plugin-solid

pnpm

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

Luego puedes iniciar las pruebas ejecutando:

npx wdio run ./wdio.conf.js

Escribiendo Pruebas

Dado que tienes el siguiente 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

En tu prueba, usa el método render de solid-js/web para adjuntar el componente a la página de prueba. Para interactuar con el componente, recomendamos usar comandos de WebdriverIO ya que se comportan más cercanos a las interacciones reales del usuario, por ejemplo:

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

Puedes encontrar un ejemplo completo de un conjunto de pruebas de componentes WebdriverIO para SolidJS en nuestro repositorio de ejemplos.