Cómo solucionar el error de Jest "Class constructor HTMLElement cannot be invoked without 'new'"

Uso Angular Testing Library para probar mis componentes y funciona de maravilla (me encanta). Sin embargo, me encontré con una situación particular al usar un Web Component dentro de mi componente. Esto provoca el error "Class constructor HTMLElement cannot be invoked without 'new'." Por lo general, este problema ocurre cuando el código se transpila de ES6+ a ES5 en un entorno donde la especificación de Custom Elements no tiene soporte completo.

Instalar la librería core-js

El primer paso es asegurarte de que tu entorno tenga los polyfills necesarios para soportar los constructores de clase para elementos HTML. Aquí es donde la librería core-js resulta muy útil. Para instalarla, abre tu terminal y ejecuta:

npm install -D core-js

La bandera -D agrega el paquete como una dependencia de desarrollo, asegurando que esté disponible durante el proceso de compilación.

Crear un archivo de polyfills

Después de instalar core-js, necesitas crear un archivo de polyfills que importe los shims necesarios. En la carpeta src de tu librería, crea un archivo llamado polyfills.ts e incluye los siguientes imports:

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements';

Estas importaciones incorporan los shims para Custom Elements. Esto te permite usar la sintaxis class para crear elementos que se puedan invocar con new, eliminando el error por completo.

Actualizar el archivo jest.config.ts

Finalmente, para asegurarte de que Jest reconozca estos polyfills al ejecutar las pruebas, actualiza el archivo jest.config.ts de tu librería para incluir el archivo de polyfills:

setupFiles: ['<rootDir>/src/polyfills.ts'],

Agrega esta línea para que Jest cargue tus polyfills antes de ejecutar los tests. Esto hace que el entorno de pruebas sea similar al entorno real y te permite correr tus pruebas sin problemas.

Conclusión

Sigue estos tres sencillos pasos para solucionar el error "Class constructor HTMLElement cannot be invoked without 'new'" y lograr que tus Custom Elements funcionen correctamente en distintos entornos. Espero que esto te ayude a ahorrar tiempo.

¡Happy coding!