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!
Top comments (0)