Gabriel Jiménez | Hace alrededor de 1 mes
Para este artículo, primero comenzaremos por entender por qué es importante probar las notificaciones de nuestras aplicaciones React. Segundo, conoceremos que herramientas necesito para probarlas. Por último, listaremos algunas de las herramientas de notificaciones más utilizadas.
Las notificaciones son parte importante de la experiencia que usuario tiene al usar nuestros servicios.
Pensemos en el siguiente ejemplo:
“Imagina que estas realizando una transacción de 1,000 pesos. Si al realizarla no recibes una notificación, seguro lo primero que se te venga a la menta es: fallo algo y mi dinero se perdió.”
Como desarrolladores frontend, debemos asegurarnos que en todo momento el usuario se sienta seguro al usar nuestros servicios.
Las notificaciones sirven como feedback sobre las acciones que un usuario realiza en nuestra aplicaciones. Generalmente, se muestran en acciones criticas como eliminar, crear, editar un recurso.
Podríamos definir como acciones criticas todas aquellas que tienen un impacto critico en el negocio. No es lo mismo un acción de crear un recurso de un catálogo a crear una transacción de dinero.
Hay flujos de negocio que involucran varios pasos dentro del frontend y el backend. Desde inicializar la base de datos con cierta data, configurar catálogos, llenar formularios, ir de una sección a otra, para finalmente ver la notificación en pantalla. Hacer este proceso sin pruebas es muy costoso y lento.
Al tener identificados y probados nuestros flujos que desencadenan las notificaciones, facilitan el agregar o modificar funcionalidades. El desarrollador solo se enfoca en lo que esta resolviendo sin perderse en todo lo que involucra un flujo complejo.
Al modificar el código, este puede seguir funcionando correctamente, pero las notificaciones por alguna razón no se muestran al usuario. Al probarlas, evitamos que esto suceda.
Para probar nuestras notificaciones, tenemos que usar un nuevo ambiente de desarrollo específicamente para nuestras pruebas. Este ambiente se crea usando Jest y React Testing Library.
Visita mi artículos para saber más sobre Jest y React Testing Library:
Qué es Jest y cómo funciona con React
Qué es React Testing Library y cómo funciona con Jest
Es una librería para mostrar notificaciones sin bloqueo. Fácil de personalizar de acuerdo a las necesidades de cada negocio. Sin embargo, uno de sus puntos en contra es que, ya no es una herramienta mantenida por la comunidad. Además de utilizar otras librerías como JQuery como dependencias, lo que puede incrementar el peso de tu aplicación. No es exclusiva de React.
Instalación
npm install --save toastr
Ejemplo de como probarlo:
File: src/toastr.test.jsx
1: import {fireEvent, render, screen} from "@testing-library/react";
2: import Toastr from "./Toastr.jsx";
3:
4: test("Toastr", async () => {
5: render(<Toastr />);
6:
7: fireEvent.click(screen.getByText('Clic para mostrar notificación Toastr'));
8:
9: expect(document.body.textContent).toContain("Mostrar notificación Toastr");
10: });
1: import toastr from 'toastr'
2:
3: const Toastr = () => {
4: function mostrarNotificacion() {
5: toastr.info('Mostrar notificación Toastr')
6: }
7:
8: return(
9: <button type='button' onClick={mostrarNotificacion}>Clic para mostrar notificación Toastr</button>
10: )
11: }
12:
13: export default Toastr;
React Toastify es una librería de notificaciones exclusivamente desarrollada para trabajar en aplicaciones React. Su personalización es bastante fácil, trabaja correctamente con peticiones asíncronas, puedes usar el Dark mode, tiene una barra de progreso para mostrar el tiempo restante.
Instalación
npm install --save react-toastify
Ejemplo de como probarlo:
File: src/Toastify.test.jsx
1: import {fireEvent, render, screen} from "@testing-library/react";
2: import Toastify from "./Toastify.jsx";
3:
4: test("Toastify", async () => {
5: render(<Toastify />);
6:
7: fireEvent.click(screen.getByText('Clic para mostrar notificación React Toastify'));
8:
9: expect(document.body.textContent).toContain("Mostrar notificación React Toastify");
10: });
File: src/Toastify.jsx
1: import { toast, ToastContainer } from 'react-toastify';
2: import 'react-toastify/dist/ReactToastify.css';
3:
4: const Toastify = () => {
5: function mostrarNotificacion() {
6: toast.info('Mostrar notificación React Toastify');
7: }
8:
9: return (
10: <div>
11: <button type="button" onClick={mostrarNotificacion}>
12: Clic para mostrar notificación React Toastify
13: </button>
14:
15: <ToastContainer />
16: </div>
17: );
18: };
19:
20: export default Toastify;
Notyf es una librería para mostrar notificaciones, puede utilizarse en proyectos con Angular, React, Vue. Una de sus características que destaca es el peso de la librería, tan solo 3KB, lo cual es bastante aceptable si te interesa el peso de tu aplicación.
Instalación
npm i notyf
Ejemplo de como probarlo:
File: src/NotyfExample.test.jsx
1: import {fireEvent, render, screen} from "@testing-library/react";
2: import NotyfExample from "./NotyfExample.jsx";
3:
4: test("Notyf", async () => {
5: render(<NotyfExample />);
6:
7: fireEvent.click(screen.getByText('Clic para mostrar notificación Notyf'));
8:
9: expect(document.body.textContent).toContain("Mostrar notificación Notyf");
10: });
File: src/NotyfExample.jsx
1: import { Notyf } from 'notyf';
2: import 'notyf/notyf.min.css';
3:
4: const NotyfExample = () => {
5: const notyf = new Notyf();
6:
7: function mostrarNotificacion() {
8: notyf.open({
9: type: 'info',
10: message: 'Mostrar notificación Notyf',
11: });
12: }
13:
14: return (
15: <button type="button" onClick={mostrarNotificacion}>
16: Clic para mostrar notificación Notyf
17: </button>
18: );
19: };
20:
21: export default NotyfExample;
Probas las notificaciones asegura que el usuario reciba la retroalimentación correcta. Además, a nivel desarrollo permite agregar nuevas funcionalidades sin romper las que ya sirve. Sirve como documentación técnica para nuevos desarrolladores.
Este es solo uno de los muchos escenarios que deberías cubrir. En el HUB de Testing en React encontrarás más ejemplos reales para probar componentes, formularios, peticiones HTTP y flujos de negocio con Jest y React Testing Library.
