Prueba de componentes React

Prueba tu primer componente React usando Jest y `react-testing-library`

La forma más fácil de comenzar a probar componentes de React es realizar pruebas instantáneas, una técnica de prueba que le permite probar componentes de forma aislada.

Si está familiarizado con las pruebas de software, es como las pruebas unitarias que realizan para las clases: prueba la funcionalidad de cada componente.

Supongo que creaste una aplicación React con create-react-app, que ya viene con Jest instalado, el paquete de prueba que necesitaremos.

Comenzamos con una prueba sencilla. CodeSandbox es un excelente entorno para probar esto. Comience con un sandbox de React, cree un App.jscomponente en una componentscarpeta y agregue un App.test.jsarchivo.

import React from 'react'export default function App() { return ( div className="App" h1Hello CodeSandbox/h1 h2Start editing to see some magic happen!/h2 /div )}

Nuestra primera prueba es tonta:

test('First test', () = { expect(true).toBeTruthy()})

Cuando CodeSandbox detecta archivos de prueba, los ejecuta automáticamente y usted puede hacer clic en el botón Pruebas en la parte inferior de la vista para mostrar los resultados de la prueba:

Un archivo de prueba puede contener varias pruebas:

Ahora hagamos algo un poco más útil: probar un componente de React. Ahora solo tenemos la aplicación, que no hace nada realmente útil, así que primero configuramos el entorno con una pequeña aplicación con más funciones: la aplicación de contador que creamos anteriormente. Si la omitiste, puedes volver atrás y leer cómo la creamos, pero para una referencia más sencilla la agrega aquí nuevamente.

Son solo 2 componentes: la aplicación y el botón. Crea el App.jsarchivo:

import React, { useState } from 'react'import Button from './Button'const App = () = { const [count, setCount] = useState(0) const incrementCount = increment = { setCount(count + increment) } return ( div Button increment={1} onClickFunction={incrementCount} / Button increment={10} onClickFunction={incrementCount} / Button increment={100} onClickFunction={incrementCount} / Button increment={1000} onClickFunction={incrementCount} / span{count}/span /div )}export default App

y el Button.jsarchivo:

import React from 'react'const Button = ({ increment, onClickFunction }) = { const handleClick = () = { onClickFunction(increment) } return button onClick={handleClick}+{increment}/button}export default Button

Vamos a utilizar el react-testing-library, que es de gran ayuda ya que nos permite inspeccionar la salida de cada componente y aplicarles eventos. Puedes leer más sobre esto en https://github.com/kentcdodds/react-testing-library o ver este video.

Primero, probemos el componente Botón.

Comenzamos importando rendery fireEventdesde react-testing-library, dos ayudantes. El primero nos permite renderizar JSX. El segundo nos permite reproducir eventos en un componente.

Crea un archivo. Button.test.jsy colócalo en la misma carpeta que Button.js.

import React from 'react'import { render, fireEvent } from 'react-testing-library'import Button from './Button'

Los botones se utilizan en la aplicación para aceptar un evento de clic y luego llaman a una función que se pasa a la onClickFunctionpropiedad. Agregamos una countvariable y creamos una función que la incrementa:Te recomendamos Filtros de Agua

let countconst incrementCount = increment = { count += increment}

Ahora, pasemos a las pruebas reales. Primero, inicializamos count en 0 y renderizamos un +1 Buttoncomponente pasando 1a incrementy nuestra incrementCountfunción a onClickFunction.

Luego obtenemos el contenido del primer hijo del componente y verificamos su salida +1.

Luego procedemos a hacer clic en el botón y verificamos que el conteo pasó de 0 a 1:

test('+1 Button works', () = { count = 0 const { container } = render( Button increment={1} onClickFunction={incrementCount} / ) const button = container.firstChild expect(button.textContent).toBe('+1') expect(count).toBe(0) fireEvent.click(button) expect(count).toBe(1)})

De manera similar, probamos un botón +100, esta vez verificando que la salida sea +100y que el clic del botón incrementa el conteo de 100.

test('+100 Button works', () = { count = 0 const { container } = render( Button increment={100} onClickFunction={incrementCount} / ) const button = container.firstChild expect(button.textContent).toBe('+100') expect(count).toBe(0) fireEvent.click(button) expect(count).toBe(100)})

Probemos ahora el componente de la aplicación. Muestra 4 botones y el resultado en la página. Podemos inspeccionar cada botón y ver si el resultado aumenta cuando hacemos clic en ellos, y también si hacemos clic varias veces:

import React from 'react'import { render, fireEvent } from 'react-testing-library'import App from './App'test('App works', () = { const { container } = render(App /) console.log(container) const buttons = container.querySelectorAll('button') expect(buttons[0].textContent).toBe('+1') expect(buttons[1].textContent).toBe('+10') expect(buttons[2].textContent).toBe('+100') expect(buttons[3].textContent).toBe('+1000') const result = container.querySelector('span') expect(result.textContent).toBe('0') fireEvent.click(buttons[0]) expect(result.textContent).toBe('1') fireEvent.click(buttons[1]) expect(result.textContent).toBe('11') fireEvent.click(buttons[2]) expect(result.textContent).toBe('111') fireEvent.click(buttons[3]) expect(result.textContent).toBe('1111') fireEvent.click(buttons[2]) expect(result.textContent).toBe('1211') fireEvent.click(buttons[1]) expect(result.textContent).toBe('1221') fireEvent.click(buttons[0]) expect(result.textContent).toBe('1222')})

Comprueba el código que funciona en este CodeSandbox: https://codesandbox.io/s/pprl4y0wq

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Prueba de componentes React

La forma más fácil de comenzar a probar componentes de React es realizar pruebas instantáneas, una técnica de prueba que le permite probar componentes de f

programar

es

2025-01-17