React-color: SOLVED: HTMLCanvasElement.prototype.getContext not implemented when running Jest test

[ZeroDarkThirty]

I have implemented the color picker as shown below:

<div className={css.colorPicker}>
    <div className={ css.swatch } onClick={ this.handleColorPickerClick } onKeyDown={this.handleColorPickerKeyDown } style={{background: this.state.ShadeAlternateRecordsColor}} tabIndex={0}>
        <div className={ css.color } />
    </div>
    {
        this.state.DisplayColorPicker ?
        <div className={ css.popover } onKeyDown={this.handleColorPickerKeyDownClose}>
            <div className={ css.cover } onClick={ this.handleColorPickerClick }/>
            <SketchPicker color={ this.state.ShadeAlternateRecordsColor } onChange={ this.handleShadeAlternateRecordsColorChange } />
        </div> : null
    }
</div>

Here's my test, which simulates a click for this.handleColorPickerClick which just toggles a state between true/false.

it("should open the color picker on click", () => {
    const colorpicker = enzyme.mount(<ColorPickerComponent {...TEST_PROPS} />);
    colorpicker.find("." + css.swatch).simulate("click");
    expect(colorpicker.state().DisplayColorPicker).toEqual(true);
}

The test passes but I get the following console error

console.error node_modules\jsdom\lib\jsdom\virtual-console.js:29
      Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
          at module.exports (C:\Code\GIT\myProject\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
          at HTMLCanvasElementImpl.getContext (C:\Code\GIT\myProject\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
          at HTMLCanvasElement.getContext (C:\Code\GIT\myProject\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:50:45)
          at render (C:\Code\GIT\myProject\node_modules\react-color\lib\helpers\checkboard.js:15:20)
          at Object.get (C:\Code\GIT\myProject\node_modules\react-color\lib\helpers\checkboard.js:30:20)
          at Checkboard (C:\Code\GIT\myProject\node_modules\react-color\lib\components\common\Checkboard.js:38:41)
          at mountIndeterminateComponent (C:\Code\GIT\myProject\node_modules\react-dom\cjs\react-dom.development.js:8562:15)
          at beginWork (C:\Code\GIT\myProject\node_modules\react-dom\cjs\react-dom.development.js:8962:16)
          at performUnitOfWork (C:\Code\GIT\myProject\node_modules\react-dom\cjs\react-dom.development.js:11798:16)
          at workLoop (C:\Code\GIT\myProject\node_modules\react-dom\cjs\react-dom.development.js:11827:26) undefined

How can I get around this issue? Please note that I'm also using css-modules for styling.

EDIT: I just figured that I should be doing shallow instead of mount. That fixed the issue.

[casesandberg]

I just figured that I should be doing shallow instead of mount. That fixed the issue.

Ah, wonderful! The next version will be using SVGs instead of canvas so this wont be a problem going forward either!

[amrita-syn]

Didn't help in my case since my tests required the components to be mounted. I recommend using jest-canvas-mock and importing it in the setup.