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

Por:

Denisse Abreu
27 de noviembre de 2022 8pm ET

Eng/Spa 8-min

# Configure su aplicación React con Vite y Vitest # Inicie su primer Caso Vitest # Configure la librería de pruebas Jest Dom # ¿Cómo usar el React Library User Event? # ¿Cómo probar el React Router? # ¿Cómo probar una entrada de formulario React? # ¿Cómo crear y probar el React Context?

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

Si desea utilizar Testing Library Jest Dom, requerirá configuración adicional. Primero, instale la libraría.

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

Ahora puede usar funciones de prueba adicionales usando el Testing Library Jest Dom 👍.

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.

Todos los casos de prueba anteriores se romperán; envuelva los componentes con BrowserRouter.

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