How to test components with DOM API in React

Question

I have a React component which used canvas API. When I test it by jest & react-test-renderer, there is an error occurred TypeError: Cannot read property 'getContext' of null.

And here is a very simple example repo.

import React, {Component} from 'react'
import TestRenderer from 'react-test-renderer'

class Rect extends Component {
  componentDidMount() {
    const ctx = this.cvs.getContext('2d')

    ctx.fillStyle = '#0ff'
    ctx.fillRect(10, 10, 180, 180)
  }

  render() {
    return <canvas ref={cvs => this.cvs = cvs} width={200} height={200} />
  }
}

describe('Rect', () => {
  it('Has a valid snapshot', () => {
    const rect = TestRenderer.create(<Rect />)

    expect(rect).toMatchSnapshot()
  })
})

sorry for my English :(

---

> jest

FAIL ./rect.spec.js Rect ✕ Has a valid snapshot (22ms)

● Rect › Has a valid snapshot

TypeError: Cannot read property 'getContext' of null

  4 | class Rect extends Component {
  5 |   componentDidMount() {
> 6 |     const ctx = this.cvs.getContext('2d')
    |                          ^
  7 | 
  8 |     ctx.fillStyle = '#0ff'
  9 |     ctx.fillRect(10, 10, 180, 180)

  at Rect.getContext [as componentDidMount] (rect.spec.js:6:26)
  at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7019:22)
  at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8234:7)
  at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2312:14)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:193:27)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
  at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2362:16)
  at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2411:31)
  at commitRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8404:7)
  at completeRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9769:3)
  at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9697:9)
  at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9601:7)
  at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9573:3)
  at requestWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9461:5)
  at scheduleWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9256:5)
  at scheduleRootUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9865:3)
  at updateContainerAtExpirationTime (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9892:10)
  at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9903:10)
  at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10428:5)
  at Object.create (rect.spec.js:19:31)