React
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. You can test React components directly in a real browser using WebdriverIO and its browser runner.
Setup
To setup WebdriverIO within your React project, follow the instructions in our component testing docs. Make sure to select react
as preset within your runner options, e.g.:
// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'react'
}],
// ...
}
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 React preset requires @vitejs/plugin-react
to be installed. Also we recommend using Testing Library for rendering the component into the test page. Therefor you'll need to install the following additional dependencies:
- npm
- Yarn
- pnpm
npm install --save-dev @testing-library/react @vitejs/plugin-react
yarn add --dev @testing-library/react @vitejs/plugin-react
pnpm add --save-dev @testing-library/react @vitejs/plugin-react