Skip to main content

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

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