Skip to main content


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.


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

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 install --save-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:

import { createSignal } from 'solid-js'

function App() {
const [theme, setTheme] = createSignal('light')

const toggleTheme = () => {
const nextTheme = theme() === 'light' ? 'dark' : 'light'

return <button onClick={toggleTheme}>
Current theme: {theme()}

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

import { expect } from '@wdio/globals'
import { render } from 'solid-js/web'

import App from './components/Component.jsx'

describe('React Component Testing', () => {
* ensure we render the component for every test in a
* new root container
let root: Element
beforeEach(() => {
if (root) {

root = document.createElement('div')

it('Test theme button toggle', async () => {
render(<App />, root)
const buttonEl = await $('button')


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