在用Jest测试React组件时,如何支持<canvas>元素

用Jest做JavaScript单元测试是个不错的选择,在Jest的基础上,用@testing-library/react是锦上添花的方法。

React Testing Library提供了render() API,可以用这个API在jsdom里渲染React的组件。jsdom是一个模拟的浏览器里的JS运行时,实现了很多重要的web标准,比如DOM和HTML。但是在运行涉及到canvas的元素测试的时候,可能会报一些错误,比如:

TypeError: Cannot read property 'beginPath' of null

这是因为Jest默认安装的包,缺少对canvas功能的支持。

对于canvas的支持,其实Jest也也实现了,只不过需要同时安装额外的包,这里我们有两个选择:

选择1: 安装canvas包

npm install canvas

如果jsdom找到了canvas包,那么render的时候,<canvas>就会提供正常该元素能够提供的功能;否则,<canvas>就像一个<div>而已。

选择2: 安装jest-canvas-mock

除了安装canvas包的方式,另外一个替代方案是安装jest-canvas-mock包。

npm install jest-canvas-mock

同时,要在jest.config.js里添加这个包,比如setupFiles: ["jest-canvas-mock"],也能达到同样的效果。