React

React vuelve fácil crear interfaces de usuario interactivas. Diseñar vistas simples para cada estado en su aplicación, y React actualizará y renderizará eficientemente, solo los componentes correctos cuando tus datos cambien. Puede probar los componentes de React directamente en un navegador real usando WebdriverIO y su gestor de navegadores.

Configuración

Para configurar WebdriverIO dentro de su proyecto Lit, siga las instrucciones en nuestros documentos de prueba de componentes. Asegúrese de seleccionar preact como preset dentro de sus opciones corredoras, por ejemplo:

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

info

Si ya está usando Vite como servidor de desarrollo también puede volver a usar tu configuración en vite. onfig.ts dentro de su configuración WebdriverIO. Para más información, consulte viteConfig en opciones de corredor.

El preset React requiere @preact/preset-vite para ser instalado. También recomendamos utilizar Testing Library para renderizar el componente en la página de prueba. Por lo tanto, tendrá que instalar las siguientes dependencias adicionales:

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

Luego puede iniciar las pruebas ejecutando:

npx wdio run ./wdio.conf.js

Tests de escritura

Dado que usted tiene el siguiente componente Lit:

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

En su prueba utilice el método render de @testing-library/preact para adjuntar el componente a la página de prueba. Para interactuar con el componente recomendamos usar comandos WebdriverIO ya que se comportan más cerca de las interacciones reales del usuario, por ejemplo:

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')
    })
})

Puede encontrar un ejemplo completo de una suite de pruebas de componentes WebdriverIO para Lit en nuestro repositorio de ejemplo.