Mock PrimeNg ChartModule con Spectator

Arcadio Quintero — Fri, 21 Jul 2023 15:08:06 +0000

Recientemente, migramos algunas librerías a Jest y nos encontramos con problemas en los tests que habíamos creado para un componente que utilizaba el módulo de gráficos de PrimeNg (que a su vez es un wrapper de ChartJS).

A primera vista, identificamos que el problema radicaba en la falta de soporte de Jest para Canvas, MutationObserver y otras APIs del navegador necesarias para ejecutar los tests (Usábamos Karma).

Finalmente, nos dimos cuenta de que teníamos dos opciones: hacer mock de estas APIs del navegador o hacer mock del módulo de ChartModule. Como estábamos utilizando Spectator para realizar los tests, logramos hacerlo fácilmente (después de mucha búsqueda, prueba y error).

En primer lugar, creamos un mock para reemplazar lo que necesitábamos. En este caso, dado que PrimeNG sigue utilizando módulos, creamos un componente y un módulo de prueba específicamente para este propósito.

// Componente que contiene chart.js en ChartModule de PrimeNG
@Component({
    selector: 'p-chart',
    template: 'PrimeNg Chart - mocked component'
})
class MockUIChart {
    // Aquí agregamos todos los imputs que estemos utilizando
    @Input()
    data: unknown;
    @Input()
    options: unknown;
    @Input()
    plugins: unknown;
}
// Módulo que importa y exporta el componente
@NgModule({
    declarations: [MockUIChart],
    exports: [MockUIChart]
})
export class MockChartModule {}

Y en nuestro test hacemos:

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 de p-chart en el OnInit trate de instanciar ChartJS que era la raíz de todos los warnings en Jest.

¿Tienes alguna experiencia con Jest, PrimeNg o herramientas de testing que te gustaría compartir? ¡Déjame tus comentarios!

DEV Community: Arcadio Quintero

Mock PrimeNg ChartModule con Spectator