Testing in Jest with JSDom throws Cannot read property 'style' of null

[duro]

This does not seem to happen anywhere outside a test environment.

Full stack trace:

TypeError: Cannot read property 'style' of null

      at Window.getComputedStyle (node_modules/jsdom/lib/jsdom/browser/Window.js:371:20)
      at innerWidth (node_modules/react-textfit/lib/utils/innerSize.js:16:24)
      at TextFit.process (node_modules/react-textfit/lib/Textfit.js:136:59)
      at TextFit.componentDidMount (node_modules/react-textfit/lib/Textfit.js:99:18)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4553:24)
      at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5729:9)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1610:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)

[duro]

Ok, I was able to figure this out, as it had to do with how snapshots work in a React + Jest world.

"refs" in snapshots are by default always null, unless you make use of jest's createNodeMock feature.

I was able to mock the ref node the way that react-textfit wants it (since it relies heavily on DOM specific APIs).

const createNodeMock = el => {
  if (el.type === 'div') {
    const mockEl = document.createElement('div')
    mockEl.style.padding = '0'
    Object.defineProperty(mockEl, 'clientHeight', {
      get() {
        return 100
      },
      enumerable: true,
      configurable: true
    })
    Object.defineProperty(mockEl, 'clientWidth', {
      get() {
        return 300
      },
      enumerable: true,
      configurable: true
    })
    return mockEl
  }
  return null
}

[CoonJS]

Full usage example:

import Component from './Component'
import renderer from 'react-test-renderer'

const createNodeMock = el => {
  if (el.type === 'div') {
    const mockEl = document.createElement('div')
    mockEl.style.padding = '0'
    Object.defineProperty(mockEl, 'clientHeight', {
      get() {
        return 100
      },
      enumerable: true,
      configurable: true
    })
    Object.defineProperty(mockEl, 'clientWidth', {
      get() {
        return 300
      },
      enumerable: true,
      configurable: true
    })
    return mockEl
  }
  return null
}

describe('CreateNodeMock testing ', () => {
  it('mock node', () => {
    const tree = renderer.create(<Component />, { createNodeMock }).toJSON()
    expect(tree).toMatchSnapshot()
  })
})