SolidJS

SolidJS is a framework to build user interfaces with simple and performant reactivity. You can test SolidJS components directly in a real browser using WebdriverIO and its browser runner.

Setup

To setup WebdriverIO within your SolidJS project, follow the instructions in our component testing docs. Make sure to select solid as preset within your runner options, e.g.:

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

info

If you are already using Vite as development server you can also just re-use your configuration in vite.config.ts within your WebdriverIO config. For more information, see viteConfig in runner options.

The SolidJS preset requires vite-plugin-solid to be installed:

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

You can then start the tests by running:

npx wdio run ./wdio.conf.js

Writing Tests

Given you have the following SolidJS component:

./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

In your test use the render method from solid-js/web to attach the component to the test page. To interact with the component we recommend to use WebdriverIO commands as they behave more close to actual user interactions, e.g.:

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

You can find a full example of a WebdriverIO component test suite for SolidJS in our example repository.