React Unit Testing con Vitest y React Testing Library.

Cómo realizar pruebas unitarias a su aplicación React TypeScript con Vitest y React Testing Library.

Hola 👋🏼, esta es la segunda parte de mi tutorial de pruebas unitarias. Aprenderemos cómo probar una aplicación React TypeScript. Nuestro entorno de trabajo es Vite, TypeScript, Vitest para Unit Testing y React Testing Library. Primero, haremos algunos casos de prueba simples; Luego, avanzaremos a temas más avanzados, como probar React Router Dom y probar el React Context.
¡Empecemos!

Configure su aplicación React con Vite y Vitest.

  • Instale Vite y elija React TypeScript como su template.
Terminal
npm create vite@latest testing-tutorial -- --template react-ts cd testing-tutorial npm install npm run dev

Después de verificar que su aplicación funciona, instale Vitest, happy-dom como su entorno para hacer pruebas, y la librería de React Testing, todo como dependencias de desarrollo; Comprueba la guía de Instalación de Vitest para más información.

Terminal
npm install -D vitest happy-dom @testing-library/react
  • Vaya a vite.config.ts y agregue el objeto test con su TypeScript.
vite.config.ts
  • Agregue al scripts "test" en package.json
package.json

Inicie su primer Caso Vitest.

Para ejecutar la primera prueba, cree un nuevo archivo en la raíz y llámelo App.test.tsx. Este archivo contendrá todas las pruebas relacionadas con el archivo App.tsx. En el siguiente código, monte el componente de la aplicación y pruebe que existe con sus elementos.

src/App.test.tsx
Terminal
npm install -D @testing-library/jest-dom
  • Vaya a la carpeta src y cree el setupTest.ts; Este archivo importará la librería Testing Jest Dom globalmente.
src/setupTest.ts
  • Vaya a vite.config.ts y agregue el archivo recién creado al objeto de "test".
vite.config.ts
  • Por último, vaya a tsconfig.json e incluya la ruta de setupTest.ts.
tsconfig.json
src/App.test.tsx

¿Cómo usar el React Library User Event?

A continuación, probaremos eventos de usuario, como botones, enlaces y logos. Primero, usaremos el contador que viene con la instalación de Vite, accede al botón por su texto utilizando la librería React Testing y verifique que el valor aumente.

src/App.test.tsx

Ejemplo usando Testing Library User Event. Primero, instale la librería. En este caso de prueba, comprobamos que el logo recibe un clic.

Terminal
npm install -D @testing-library/user-event
src/App.test.tsx

¿Cómo probar el React Router?

Comenzaremos instalando el React Router Dom. Cree un enlace con su página 'about'.

Terminal
npm install react-router-dom
  • Primero, crea una nueva carpeta routes; En el interior, cree about.tsx e inserte el siguiente código.
Git Bash
cd src mkdir routes cd routes touch about.tsx
src/routes/about.tsx
  • Vaya a main.tsx agregue el "Browser Router" e importe la ruta about.
src/main.tsx
  • Agrega tu enlace a App.tsx y prueba que funciona.
src/App.tsx
  • Cree un caso de prueba para comprobar que el enlace 'about' recibe un clic del usuario.
src/App.test.tsx

¿Cómo probar una entrada de formulario React?

En esta parte del tutorial, crearemos un campo de entrada reutilizable. Primero, cree una carpeta components en la raíz; luego, cree form-input.tsx y copie el siguiente código. ¡Recuerda! usar TypeScript y pasar el 'label' en un proyecto real.

Git Bash
cd src mkdir components cd components touch form-input.tsx
src/components/form-input.tsx
  • Cree el form.tsx en la carpeta components.
src/components/form.tsx
  • Ahora que tenemos un formulario, es hora de probarlo. Crea una carpeta test dentro de los componentes, luego cree form.test.tsx.
Git Bash
cd src && cd components mkdir test cd test touch form.test.tsx
src/components/test/form.test.tsx

¿Cómo crear y probar el React Context?

Vamos a crear un React Context sencillo que recibirá la entrada de correo electrónico que creamos anteriormente. Esta lección tendrá mucha refactorización, ya que agregar el Context cambiará el funcionamiento de la aplicación.

  • Primero, cree la carpeta context, luego cree el user-context.tsx, este archivo almacenará todos los estados relacionados con el usuario.
Git Bash
cd src mkdir context cd context touch user-context.tsx
src/context/user-context.tsx
  • Vaya a main.ts y envuelva el componente App dentro del proveedor de usuario (user provider).
src/main.tsx
  • Vaya a form.tsx e importe el Context; así podrá almacenar el valor del correo electrónico.
src/main.tsx
  • Agregue una nueva prueba a form.test.txs para verificar si el "User Context" está pasando valores y mostrando el correo electrónico en el Dom. Eso es todo por ahora, ¡hasta la próxima!
src/components/test/form.test.tsx