Cómo probar aplicaciones Next.js usando Jest

El objetivo principal de cualquier proceso de desarrollo es crear aplicaciones listas para la producción. Para lograr esto, es fundamental escribir código que no solo cumpla con los requisitos funcionales, sino que también se mantenga estable y confiable a lo largo del tiempo. Las pruebas sirven como salvaguarda, asegurando que las aplicaciones funcionen como se espera incluso cuando se realizan nuevas actualizaciones durante el desarrollo.

Si bien escribir pruebas integrales que abarquen varios casos extremos puede llevar una cantidad de tiempo considerable, ayuda a marcar y resolver problemas antes de que lleguen a los entornos de producción.

Prueba de aplicaciones Next.js

Escribir pruebas es un aspecto esencial y, a menudo, subestimado del desarrollo de aplicaciones sólidas. Es fácil caer en la tentación de enviar el código directamente a producción, confiando en la creencia de que "usted creó el código, ¡así que debe funcionar!"

Sin embargo, este enfoque puede generar problemas y errores imprevistos en los entornos de producción. Como resultado, la adopción de un enfoque de desarrollo basado en pruebas (TDD) puede ayudarlo a maximizar su confianza en su código y minimizar el tiempo invertido. depuración y resolución de errores menores que podría haber pasado a producción.

¿Qué es la broma?

Broma es un marco de prueba popular que es ampliamente utilizado por diferentes Marcos de JavaScript. Proporciona un conjunto de funciones de prueba, como un poderoso corredor de prueba, simulación automática y prueba de instantáneas.

Idealmente, estas funciones son útiles para lograr una cobertura de prueba integral y garantizar la confiabilidad de su aplicación en todo el mundo. diferentes tipos de pruebas.

Crear una aplicación de tareas pendientes de Next.js

Ahora, profundicemos en el proceso de ejecución de pruebas unitarias en una aplicación Next.js usando Jest. Sin embargo, antes de comenzar, cree un proyecto Next.js e instale las dependencias necesarias.

Para empezar, sigue estos pasos:

1. Cree un nuevo proyecto Next.js ejecutando el siguiente comando en su terminal:

   npx create-next-app@latest test-tutorial

2. Después de crear el proyecto, navegue al directorio del proyecto ejecutando:

   cd nextjs-test-tutorial

3. Instale las dependencias necesarias como devDependencias ejecutando el siguiente comando:

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Con el proyecto configurado y las dependencias instaladas, ahora está listo para compilar la aplicación Next.js y escribir pruebas unitarias con Jest.

Crear el componente de tareas pendientes

En el /src directorio del proyecto, abra el páginas/index.js, elimine el código estándar de Next.js existente y agregue el siguiente código.

Primero, realice las siguientes importaciones y defina dos funciones que administrarán las tareas pendientes del usuario: añadirTodo función y eliminarTodo función.

importar { estado de uso } de"reaccionar";
importar estilos de"../estilos/Home.module.css";
exportarpor defectofunciónHogar() {
constante [todos, setTodos] = useState([]);
constante [newTodo, setNewTodo] = useState("");
constante agregarTodo = () => {
si (nuevoTodo.trim() !== "") {
constante actualizadoTodos = [...todos, newTodo];
 setTodos (actualizadoTodos);
 establecerNuevoTodo("");
 }
 };
constante eliminarTodo = (índice) => {
constante actualizadoTodos = [...todos];
 actualizadoTodos.splice (índice, 1);
 setTodos (actualizadoTodos);
 };

El código utiliza el useState gancho para inicializar y actualizar las variables de estado: todos y nuevoTodo. El añadirTodo La función agrega una nueva tarea pendiente a la lista de tareas pendientes cuando el valor de entrada no está vacío, mientras que la función eliminarTodo La función elimina una tarea pendiente específica de la lista en función de su índice.

Ahora, escriba el código para los elementos JSX representados en el DOM del navegador.

devolver (


 tipo ="texto"
 className={estilos.entrada}
 valor={nuevoTodo}
 data-testid="entrada pendiente"
 onChange={(e) => setNewTodo (e.objetivo.valor)}
 />
"añadir-todo">
 Añadir Todo
 </button>
"lista de quehaceres">
 {todos.mapa((todo, índice) => (


 {hacer}
 </li>
 ))}
 </ul>
 {todos.mapa((todo, índice) => (


 onClick={() => deleteTodo (índice)}
 className={estilos.botón}
 datos-testid={`eliminar-todo-${índice}`}
 >
 Borrar
 </button>
 </div>
 ))}
 </div>
 );}

Escritura de casos de prueba

Antes de comenzar a escribir casos de prueba, es crucial configurar Jest de acuerdo con sus requisitos de prueba específicos. Esto implica crear y personalizar el jest.config.js archivo, que sirve como base para su configuración de prueba.

En el directorio raíz, cree un nuevo jest.config.js archivo. Luego, agregue el siguiente código para configurar Jest en consecuencia:

constante siguiente broma = requerir("siguiente/broma");
constante createJestConfig = nextJest({
 dir: "./",
});
constante customJestConfig = {
 directorios de módulos: ["módulos_nodos", "/"],
 entorno de prueba: "broma-entorno-jsdom",
};
módulo.exportaciones = createJestConfig (customJestConfig);

Finalmente, abra el paquete.json archivo y agregue un nuevo script llamado prueba que ejecutará el comando broma --watchAll para ejecutar todos los casos de prueba y observar cualquier cambio.

Después de realizar la actualización, sus scripts deberían verse así:

"guiones": {
"desarrollador": "siguiente desarrollador",
"construir": "próxima construcción",
"comenzar": "próximo comienzo",
"hilas": "siguiente pelusa",
"prueba": "broma --watchAll"
 },

Con las configuraciones en su lugar, continúe con la escritura y ejecución de pruebas.

Prueba de la aplicación Next.js To-Do con Jest

En el directorio raíz del proyecto, cree una nueva carpeta llamada __pruebas__. Jest buscará archivos de prueba en esta carpeta. Dentro de esta carpeta, crea un nuevo archivo llamado índice.prueba.js.

Primero, realice las siguientes importaciones.

importar Hogar de"../src/páginas/índice";
importar"@testing-library/jest-dom";
importar { fireEvent, render, screen, waitFor, act } de"@testing-library/reaccionar";

Escriba una prueba para ver si todos los elementos se representan correctamente:

describir("Aplicación Todo", () => {
 él("representa la aplicación de tareas pendientes", () => {
 prestar(<Hogar />);

 esperar (pantalla.getByTestId("entrada pendiente")).toBeInTheDocument();
 esperar (pantalla.getByTestId("añadir-todo")).toBeInTheDocument();
 });
});

El caso de prueba verifica que la aplicación To-Do y sus elementos se representen correctamente. Dentro del caso de prueba, el Hogar componente se renderiza usando el prestar función de la biblioteca de prueba.

Entonces, las afirmaciones se hacen usando el esperar función para garantizar que elementos específicos con ID de prueba, como todo-entrada están presentes en la salida renderizada. Si estos elementos se encuentran en el DOM, la prueba pasa; de lo contrario, falla.

Ahora, ejecute el siguiente comando para ejecutar la prueba.

prueba de ejecución npm

Debería ver una respuesta similar si pasa la prueba.

Probar diferentes acciones y simular errores

Describa estos casos de prueba para verificar la funcionalidad de las funciones Agregar tareas pendientes y Eliminar tareas pendientes.

Comience por escribir el caso de prueba para la función Agregar tareas pendientes.

 él("agrega una tarea pendiente", asíncrono () => {
 prestar(<Hogar />);

constante todoEntrada = pantalla.getByTestId("entrada pendiente");
constante addTodoButton = pantalla.getByTestId("añadir-todo");
constante todoList = pantalla.getByTestId("lista de quehaceres");
esperar acto(asíncrono () => {
 fireEvent.change (todoEntrada, { objetivo: { valor: "Nuevo Todo" } });
 addTodoButton.click();
 });
esperar esperar(() => {
 esperar (todoList).toHaveTextContent("Nuevo Todo");
 });
 });

El fragmento de código anterior simula la interacción del usuario escribiendo en un campo de entrada y haciendo clic en el botón Agregar. Luego, utilizando un valor de entrada de tareas pendientes simulado, verifica si el valor de entrada se agregó correctamente a la lista de tareas pendientes.

Guarde el archivo y verifique la terminal. La prueba debería volver a ejecutarse automáticamente y cerrar la sesión de resultados de pruebas similares.

Para simular un error de prueba, modifique el ID de prueba del botón Agregar y vuelva a ejecutar la prueba. Con esta actualización, la prueba debería fallar y cerrar sesión con un mensaje de error que indica el error específico encontrado.

Idealmente, en una base de código más grande con múltiples colaboradores que realizan cambios frecuentes, las pruebas juegan un papel crucial en la identificación de posibles errores que podrían provocar fallas en el sistema. Al realizar pruebas, puede marcar fácilmente las incoherencias, como la que se muestra arriba, y resolverlas durante el desarrollo.

Finalmente, escriba el caso de prueba para la función Eliminar tareas pendientes.

 él("borra una tarea pendiente", asíncrono () => {
 prestar(<Hogar />);

constante todoEntrada = pantalla.getByTestId("entrada pendiente");
constante addTodoButton = pantalla.getByTestId("añadir-todo");

 fireEvent.change (todoEntrada, { objetivo: { valor: "Todo 1" } });
 fireEvent.click (agregarTodoButton);

constante deleteTodoButton = pantalla.getByTestId("eliminar-todo-0");
 fireEvent.click (eliminarTodoButton);

constante todoList = pantalla.getByTestId("lista de quehaceres");
esperar esperar(() => {
 esperar (todoList).toBeEmptyDOMElement();
 });
 });

Nuevamente, verifica si la tarea pendiente se eliminó con éxito. Guarde el archivo para ejecutar la prueba.

Pruebas unitarias usando Jest

Esta guía le ha proporcionado los conocimientos necesarios para escribir y ejecutar pruebas unitarias sencillas, usando un componente To-Do como ejemplo. Para garantizar la estabilidad y confiabilidad de las funciones principales de su aplicación y reducir las posibilidades de problemas inesperados en entornos de producción, es importante priorizar las pruebas de escritura para su clave componentes

Además, puede mejorar su enfoque de prueba incorporando pruebas instantáneas y pruebas de extremo a extremo.