DEV Community

IagoLast
IagoLast

Posted on

Next.js 14: No hemos aprendido NADA ūüė°

Hace ya alg√ļn tiempo que Next.js est√° en el foco del desarrollo frontend. Es el framework de moda: r√°pido, moderno, fantasticoso (fant√°stico y maravilloso).

Como ocurre con cada nueva tecnología, miles de desarrolladores aspiran a ser early adopters y dedican una fortuna para reemplazar tecnologías obsoletas con las más relucientes. Next.js no es una excepción.

Quiero aclarar que ni soy un experto en Next.js ni soy un detractor. De hecho, me gusta Next y creo que ofrece ideas y avances muy valiosos para la comunidad. Sin embargo, he observado que están cometiendo un error, en mi opinión, GRAVE. Esta semana, tras la conferencia donde se presentó next/learn, decidí que escribiría un artículo al respecto.

El error es tan fundamental que se puede resumir en una frase:

El ecosistema de Next.js relega el testing.

A pesar de enfatizar constantemente las ventajas de rendimiento, la rapidez del compilador, la eficiencia del app router y la revolucionaria naturaleza de los server-side-components, en toda la documentación ni se menciona el TESTING.

La documentación de next sin referencias a testing

En versiones anteriores al app router (pages), al menos contaban con una sección sobre testing en el apartado de "optimizaciones". Sin embargo, esta sección ha desaparecido en la documentación actual.

Es sorprendente, pero parece que en pleno 2023 debemos recordar nuevamente la importancia del testing automático. Afortunadamente, en Vercel ya lo saben, pues el primer punto destacado de Next14 es que cuentan con 5000 tests en su base de código.

Image description

A√ļn as√≠, por razones desconocidas, contin√ļan omitiendo casi por completo toda referencia a testing. C√≥mo si sus clientes no necesitasen hacer pruebas.

Yo tengo una opini√≥n bastante radical, creo que los tutoriales y ejemplos deber√≠an seguir la metodolog√≠a TDD y cada muestra de c√≥digo deber√≠a incluir un test asociado. Aunque se que esto es una utop√≠a que √ļnicamente existe en mi cabeza, creo que al menos ser√≠a positivo que desde Next se promoviesen un M√ćNIMO estas buenas pr√°cticas y al menos preparasen el terreno para que la comunidad interesada en testing pueda investigar y generar contenido.

Al iniciar una app desde cero, no te pregunta por el framework de unit testing que utilizar√°s ni incluye un script de test predeterminado.

Image description

Ni siquiera incluye un script de "test":

{
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
}
Enter fullscreen mode Exit fullscreen mode

No me doy por vencido. Intentaré configurar Jest siguiendo los ejemplos proporcionados en la documentación anterior.

El tutorial es bastante directo. Instalo las dependencias:

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom 
Enter fullscreen mode Exit fullscreen mode

Luego, creo el archivo jest.config.mjs:

import nextJest from 'next/jest.js'

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)
Enter fullscreen mode Exit fullscreen mode

Y finalmente realizo un test de prueba. Todo parece funcionar.

Image description

Sin embargo, ¬Ņqu√© ocurre con los server-side components as√≠ncronos?


async function getData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("World");
    }, 1000);
  });
}

export default async function Home() {
  const data = await getData();
  return <h1>Hello {data}</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Este componente funciona perfectamente en Next, pero al intentar ejecutar los tests nuevamente…

Los tests fallando

Es evidente: no es posible realizar tests unitarios de p√°ginas SSR. Actualmente, la √ļnica opci√≥n que conozco es utilizar tests E2E con Playwright o Cypress.

Pero si queremos probar cosas tan "sencillas" (o al menos comunes) cómo layouts, rutas complejas y otros aspectos que anteriormente eran fácilmente testables con Jest + Testing Library estamos totalmente abandonados.

Conclusión

Hoy, resulta complejo (si no imposible) desarrollar una aplicación en Next.js con tests unitarios. Los tests son herramientas esenciales para garantizar la calidad del software y la eficiencia en el desarrollo.

Lamentablemente, el framework que promete liderar el desarrollo frontend en los pr√≥ximos a√Īos parece desestimar la importancia del testing.

Me preocupa que, si ya es difícil convencer a los desarrolladores de realizar pruebas, si el framework no ayuda será una batalla perdida.

Espero que alguien del equipo de Next (preferentemente hispanohablante ;) ) lea esto y tome acciones, pues insisto: es una tecnología impresionante.

Top comments (1)

Collapse
 
sgomez profile image
Sergio G√≥mez • Edited

El problema es que Home es una función asíncrona y render acaba recibiendo una promesa. Haciendo este cambio funciona:

import { render, screen, waitFor } from '@testing-library/react'

import Page from '@/app/demo/page'

it('should renders the demo page', async () => {
  const page = await Page()
  render(page)

  await waitFor(() => {
    expect(screen.getByRole('heading', { name: /Hello World/ })).toBeTruthy()
  })
})
Enter fullscreen mode Exit fullscreen mode