在用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"]，也能达到同样的效果。