Advice for testing uPlot in unit tests (Jest)

[hmillison]

Curious what the best practice for interacting with uPlot in my UI unit tests is because uPlot is using canvas under the hood it seems to fail to render in the Jest environment due to Uncaught TypeError: Cannot read property ‘clearRect’ of undefined.

Is the recommendation to mock uPlot in this case or is there a different approach used by folks?

Environment used for testing:
Node 14.15
Jest, React v16, React Testing Library

[leeoniya]

there's this: https://www.npmjs.com/package/canvas, but it has no Path2D support: Automattic/node-canvas#1116

your best bet will be to automate a headless browser. see:

https://jestjs.io/docs/puppeteer and
https://github.com/playwright-community/jest-playwright

[leeoniya]

also check out #175

[hmillison]

Thanks for the fast response ❤️ ! Appreciate pointing me in the right direction on this.

I have some automated tests with Cypress so that is definitely an option. I will experiment with the canvas library to see if that can give me what i was looking for, thanks!

[hmillison]

For anyone who comes across this issue in the future, Jest Canvas Mock (https://www.npmjs.com/package/jest-canvas-mock) did the trick of getting this library to render without errors.

Note that nothing will actually render in the canvas so you will most likely need to go the browser test route if you want to test the functionality of uPlot in your app.

[nielsuit227]

Hi @hmillison, thanks for pointing towards this package. I'm quite curious how you ended up using this? Did you combine it with cypress or check all draw calls with jest?