Cómo escribir pruebas instantáneas para componentes React con Jest

Introducción

Las pruebas de instantáneas le permiten asegurarse de que su resultado siga comportándose como se espera. Esto es útil porque, a medida que revisa su código para realizar actualizaciones con el tiempo, existe una mayor probabilidad de que esos cambios puedan provocar que algo falle.

A diferencia del estricto desarrollo impulsado por pruebas (TDD), donde la práctica estándar es escribir primero las pruebas fallidas y luego escribir el código para que las pruebas pasen, las pruebas instantáneas adoptan un enfoque diferente.

Al escribir pruebas de instantáneas para un componente de React, primero debe tener el código en un estado funcional. Luego, genere una instantánea de su resultado esperado según ciertos datos. Las pruebas de instantáneas se envían junto con el componente. Jest, un marco de pruebas, comparará la instantánea con el resultado generado para la prueba.

En caso de que una prueba falle, puede significar dos cosas. Si los resultados de la prueba son inesperados, es posible que deba solucionar un problema con su componente. Si los resultados de la prueba son los esperados, puede significar que las pruebas de instantáneas deben actualizarse para admitir el nuevo resultado.

En este tutorial, explorará las pruebas instantáneas y cómo puede usarlas para garantizar que su interfaz de usuario (UI) no cambie inesperadamente.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local.
• Puede resultar beneficioso tener cierta familiaridad con React y Jest, pero no es obligatorio.

Este tutorial también utiliza Visual Studio Code como editor de código y para la comodidad de ejecutar una terminal integrada. Sin embargo, puede reemplazarlo con el editor y la terminal que prefiera.

Este tutorial fue verificado con Node v14.7.0, npmv6.14.7, reactv16.13.1 y jestv24.9.0.

Paso 1: creación de un componente React para probar

En primer lugar, para tener algo que probar, deberá crear una aplicación React con Create React App. Para este tutorial, el proyecto se llamará react-snapshot-tests.

Abra su terminal y ejecute el siguiente comando:

npx create-react-app@3.4.1 react-snapshot-tests

Luego, cambie al directorio de la aplicación recién creada:

cd react-snapshot-tests

A continuación, inicie la aplicación:

npm start

En este punto, deberías tener una aplicación React ejecutándose y poder verla en un navegador web. A continuación, tendrás que crear un componente que puedas probar.

Para los propósitos de este tutorial, el componente que vas a crear renderiza los itemsaccesorios que recibe.

En tu terminal, crea un componentssubdirectorio bajo src:

mkdir src/components

Luego, crea un Items.jscomponente:

nano src/components/Items.js

Añade el siguiente código a Items.js:

src/componentes/Items.js

import React from 'react';import PropTypes from 'prop-types';/** * Render a list of items * * @param {Object} props - List of items */function Items(props) {  const { items = [] } = props;  // A single item in the list, render a span.  if (items.length === 1) {    return span{items[0]}/span;  }  // Multiple items on the list, render a list.  if (items.length  1) {    return (      ul        {items.map(item = li key={item}{item}/li)}      /ul    );  }  // No items on the list, render an empty message.  return spanNo items in list/span;}Items.propTypes = {  items: PropTypes.array,};Items.defaultProps = {  items: []};export default Items;

Este código representará los itemsaccesorios en función de la cantidad:

• Si hay varios elementos, estos se mostrarán en una lista desordenada ( ul).
• Si hay un solo elemento, éste se mostrará en un spanelemento.
• Si no hay elementos, se mostrará un mensaje de error.

Finalmente, actualizamos App.jspara renderizar nuestro componente:

nano src/App.js

Reemplace el contenido de App.jspor lo siguiente:

fuente/App.js

import React, { Component } from 'react';import Items from './components/Items';class App extends Component {  render() {    const items = [      'Shark',      'Dolphin',      'Octopus'    ];    return (      Items items={items} /    );  }}export default App;

Si visita la aplicación en el navegador, aparecerá una pantalla con una lista de los valores que estableció en App.js:

Output* Shark* Dolphin* Octopus

Como había varios items, se muestra como una lista desordenada.

A continuación, agregará sus pruebas instantáneas.

Paso 2: escribir pruebas de instantáneas

Para comenzar, elimine el App.test.jsarchivo generado por Create React App:

rm src/App.test.js

No será necesario para este tutorial.

A continuación, instale react-test-renderer, una biblioteca que le permite representar componentes React como objetos JavaScript sin la necesidad de un DOM.

npm install react-test-renderer@16.13.1

Agreguemos su primera prueba. Para comenzar, deberá crear un Items.test.jsarchivo:

nano src/components/Items.test.js

Escriba una prueba que represente el Itemscomponente sin elementos pasados ​​como accesorios:

src/componentes/Items.test.js

import React from 'react';import renderer from 'react-test-renderer';import Items from './Items';it('renders correctly when there are no items', () = {  const tree = renderer.create(Items /).toJSON();  expect(tree).toMatchSnapshot();});

A continuación, ejecutemos las pruebas. Create React App se encargó de toda la inicialización para configurar las pruebas:

npm test

Deberías aprobar el examen para "renders correctly when there are no items":

Cuando ejecute una prueba de instantánea por primera vez, observe que se crea un nuevo archivo de instantánea dentro de un __snapshots__directorio. Dado que el archivo de prueba se llama Items.test.js, el archivo de instantánea se llama apropiadamente Items.test.js.snap.

El contenido Items.tests.js.snapdebe ser similar a:

src/componentes/__instantáneas__/Items.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLPexports[`renders correctly when there are no items 1`] = `span  No items in list/span`;

Esta instantánea coincide con la salida exacta del componente.

Jest utiliza pretty-formatpara hacer que los archivos de instantáneas sean legibles para humanos.

Ahora puede crear las pruebas para los otros dos escenarios donde hay un elemento y donde hay varios elementos.

Abierto Items.tests.js:

nano src/components/Items.test.js

Añade las siguientes líneas de código:

src/componentes/Items.test.js

// ...it('renders correctly when there is a single item', () = {  const items = ['one'];  const tree = renderer.create(Items items={items} /).toJSON();  expect(tree).toMatchSnapshot();});it('renders correctly when there are multiple items', () = {  const items = ['one', 'two', 'three'];  const tree = renderer.create(Items items={items} /).toJSON();  expect(tree).toMatchSnapshot();});

En este punto, tienes tres pruebas escritas: una para ningún elemento, una para un solo elemento y otra para varios elementos.

Vuelva a ejecutar las pruebas:

npm test

Las tres pruebas deberían pasar exitosamente y ahora tendrá tres instantáneas en su __snapshots__directorio.

A continuación, solucionará una prueba fallida actualizando una prueba instantánea.

Paso 3: Actualización de las pruebas de instantáneas

Para comprender mejor por qué necesita pruebas instantáneas, deberá introducir cambios en el Itemscomponente y volver a ejecutar las pruebas. Esto representará una simulación de lo que sucedería cuando se realizan cambios en un proyecto en desarrollo.

Abierto Items.js:

nano src/components/Items.js

Agregue nombres de clase a los elementos spany li:

src/componentes/Items.js

.../** * Render a list of items * * @param {Object} props - List of items */function Items(props) {  const { items = [] } = props;  // A single item in the list, render a span.  if (items.length === 1) {    return span className="item-message"{items[0]}/span;  }  // Multiple items on the list, render a list.  if (items.length  1) {    return (      ul        {items.map(item = li key={item} className="item-message"{item}/li)}      /ul    );  }  // No items on the list, render an empty message.  return span className="empty-message"No items in list/span;}Items.propTypes = {  items: PropTypes.array,};Items.defaultProps = {  items: [],};export default Items;

Ejecutemos nuevamente las pruebas:

npm test

Observarás resultados de pruebas fallidos:

Jest comparó las instantáneas existentes con el componente renderizado con los cambios actualizados y falló porque se agregaron algunas cosas al componente. Luego, muestra una diferencia de los cambios que se introdujeron en las pruebas de instantáneas.

Si los cambios no son los esperados, detectó el error antes de que se implementara el cambio y ahora puede solucionarlo. Si los cambios eran los esperados, deberá actualizar las pruebas de instantáneas para que se realicen correctamente.

Para el tutorial, puedes suponer que este era un cambio esperado. Tenías la intención de agregar nombres de clase al componente. Luego, debes actualizar las pruebas de instantáneas.

Mientras Jest está en modo interactivo, puedes actualizar las pruebas instantáneas presionando ucon las opciones proporcionadas:

Nota: Alternativamente, si tiene Jest instalado globalmente, puede ejecutar jest --updateSnapshoto jest -u.

Esto actualizará las instantáneas para que coincidan con las actualizaciones que realizó y sus pruebas pasarán.

Aquí está la prueba de instantánea anterior sin elementos:

src/componentes/__instantáneas__/Items.test.js.snap

//  ...exports[`renders correctly when there are no items 1`] = `span  No items in list/span`;//  ...

Y aquí está la prueba de instantánea recién actualizada sin elementos:

src/componentes/__instantáneas__/Items.test.js.snap

//  ...exports[`renders correctly when there are no items 1`] = `span  className="empty-message"  No items in list/span`;// ...

Luego de actualizar las pruebas, pasarán:

Ahora tienes pruebas aprobadas nuevamente. Si este fuera un proyecto en desarrollo, podrías implementar el código sabiendo que los cambios que deseaste están documentados para el desarrollo futuro.

Conclusión

En este tutorial, escribiste pruebas de instantáneas para un componente de React. También modificaste el componente para que experimentara pruebas fallidas. Por último, actualizaste las instantáneas para corregir las pruebas.

Esta fue una pequeña simulación de un proyecto en vivo. Este ciclo de pruebas que pasan, fallan y solucionan los problemas formará parte de su flujo de trabajo de desarrollo.

Las pruebas de instantáneas están pensadas para ser una de las muchas herramientas de prueba diferentes. Por lo tanto, es posible que aún deba escribir pruebas para sus acciones y reductores.

Si bien ya ha explorado los conceptos básicos de las pruebas de instantáneas, hay mucho que puede aprender sobre cómo escribir mejores pruebas de instantáneas. Eche un vistazo a las prácticas recomendadas de instantáneas de la documentación de Jest para obtener más información sobre las pruebas de instantáneas.

Si desea obtener más información sobre React, consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.