React

React torna indolor a criação de interfaces de usuário interativas. Projete visualizações simples para cada estado em sua aplicação, e o React atualizará e renderizará eficientemente apenas os componentes certos quando seus dados mudarem. Você pode testar componentes React diretamente em um navegador real usando WebdriverIO e seu browser runner.

Configuração

Para configurar o WebdriverIO em seu projeto React, siga as instruções em nossa documentação de teste de componentes. Certifique-se de selecionar react como preset dentro das suas opções de runner, por exemplo:

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

informação

Se você já está usando Vite como servidor de desenvolvimento, você também pode reutilizar sua configuração em vite.config.ts dentro da sua configuração WebdriverIO. Para mais informações, veja viteConfig nas opções de runner.

O preset React requer que @vitejs/plugin-react esteja instalado. Também recomendamos usar Testing Library para renderizar o componente na página de teste. Para isso, você precisará instalar as seguintes dependências adicionais:

npm

npm install --save-dev @testing-library/react @vitejs/plugin-react

Yarn

yarn add --dev @testing-library/react @vitejs/plugin-react

pnpm

pnpm add --save-dev @testing-library/react @vitejs/plugin-react

Você pode então iniciar os testes executando:

npx wdio run ./wdio.conf.js

Escrevendo Testes

Dado que você tem o seguinte componente React:

./components/Component.jsx

import React, { useState } from 'react'

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

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

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

export default App

No seu teste, use o método render de @testing-library/react para anexar o componente à página de teste. Para interagir com o componente, recomendamos usar comandos WebdriverIO, pois eles se comportam mais próximos às interações reais do usuário, por exemplo:

app.test.tsx

import { expect } from '@wdio/globals'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import * as matchers from '@testing-library/jest-dom/matchers'
expect.extend(matchers)

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

describe('React Component Testing', () => {
    it('Test theme button toggle', async () => {
        render(<App />)
        const buttonEl = screen.getByText(/Current theme/i)

        await $(buttonEl).click()
        expect(buttonEl).toContainHTML('dark')
    })
})

Você pode encontrar um exemplo completo de uma suíte de testes de componentes WebdriverIO para React em nosso repositório de exemplos.