Tengo un gráfico (que funciona en los navegadores como se esperaba en los navegadores) es un componente de reacción que acepta un número entero y luego agrega el punto al gráfico con el valor deseado, el gráfico también descarta datos si hay más de x(40 ) puntos de datos en el gráfico.

Estoy usando jest-canvas-mock para tener una instantánea utilizable para mi gráfico, pero solo devuelve una tontería.

Aquí está mi prueba;

 beforeAll(() => { class ResizeObserver { observe() {} disconnect() {} } window.ResizeObserver = ResizeObserver as any; }) it("Should render a canvas", async () => { let ag: RenderResult<typeof queries, HTMLElement> await waitFor(() => { ag = render(<AudioGraph freq={500}/>) }).then(() => { expect(ag.container.querySelector('canvas')?.getContext("2d")?.__getDrawCalls()).toMatchSnapshot() }) })

Estoy pensando que esto tiene algo que ver con el ResizeObserver reemplazado, que se requiere para chart.js, porque no hay una ventana real y, por lo tanto, espacio para representar el lienzo. Aquí está mi instantánea;

 exports[`audiograph Should render a canvas 1`] = ` Array [ Object { "props": Object { "height": 0, "width": 0, "x": 0, "y": 0, }, "transform": Array [ 1, 0, 0, 1, 0, 0, ], "type": "clearRect", }, Object { "props": Object { "height": 0, "width": 0, "x": 0, "y": 0, }, "transform": Array [ 1, 0, 0, 1, 0, 0, ], "type": "clearRect", }, ] `;

La documentación muestra otros métodos para obtener html de un lienzo, pero tampoco devuelven nada útil.

¿Qué estrategia debo usar para probar que mi componente está haciendo lo que espero?