# SolidJS

[SolidJS](https://www.solidjs.com/) 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](/docs/runner.md#browser-runner).

## Setup[​](#setup "Direct link to Setup")

To setup WebdriverIO within your SolidJS project, follow the [instructions](/docs/component-testing.md#set-up) 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](https://vitejs.dev/) 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](/docs/runner.md#runner-options).

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

* npm
* Yarn
* pnpm
* Bun

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

```
yarn add --dev vite-plugin-solid
```

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

```
bun add --dev vite-plugin-solid
```

You can then start the tests by running:

```
npx wdio run ./wdio.conf.js
```

## Writing Tests[​](#writing-tests "Direct link to 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](https://github.com/webdriverio/component-testing-examples/tree/main/solidjs-typescript-vite).