Cómo Convertir ChartModule a Spectator para Facilitar las Pruebas

Recientemente, migramos algunas bibliotecas a Jest y encontramos problemas con las pruebas que habíamos creado para un componente que usaba el ChartModule de PrimeNg (que es un wrapper para ChartJS).

A primera vista, identificamos que el problema provenía de la falta de soporte de Jest para Canvas, MutationObserver y otras APIs del navegador necesarias para ejecutar las pruebas (Karma usa un navegador real para ejecutar las pruebas, pero Jest no).

Finalmente, nos dimos cuenta de que teníamos dos opciones: o simular las APIs del navegador o simular el ChartModule. Como estábamos usando Spectator para las pruebas, logramos hacer esto fácilmente (después de mucha búsqueda, prueba y error).

Primero, creamos un mock para reemplazar lo que necesitábamos. En este caso, dado que PrimeNG todavía usa módulos, creamos un componente y un módulo de prueba específicamente para este propósito.

// Component containing chart.js in PrimeNG's ChartModule
@Component({
    selector: 'p-chart',
    template: 'PrimeNg Chart - mocked component'
})
class MockUIChart {
    // Here we add all the inputs that we are using
    @Input()
    data: unknown;
    @Input()
    options: unknown;
    @Input()
    plugins: unknown;
}
// Module that imports and exports the component
@NgModule({
    declarations: [MockUIChart],
    exports: [MockUIChart]
})
export class MockChartModule {}

En nuestra prueba, hacemos lo siguiente:

describe('ComponentStandalone', () => {
    let spectator: Spectator<ComponentStandalone>;

    const createComponent = createComponentFactory({
        component: ComponentStandalone,
        overrideComponents: [
            [
                ComponentStandalone,
                {
                    remove: { imports: [ChartModule] },
                    add: { imports: [MockChartModule] }
                }
            ]
        ]
    });
});

Con esto, evitamos que el componente p-chart intente instanciar ChartJS en el ngAfterViewInit, que era la causa raíz de todas las advertencias de Jest.

¿Tienes alguna experiencia con Jest, PrimeNG o herramientas de prueba que te gustaría compartir? ¡Deja tus comentarios abajo!