Does not work with react-test-renderer

[msakrejda]

Hi, we have some components that use react-collapse (thanks!) but trying to test them:

import Collapse from 'react-collapse'
import renderer from 'react-test-renderer'

const tree = renderer.create(<Collapse isOpened={true}><div>stuff</div></Collapse>).toJSON()

...I'm hitting the following error:

     TypeError: Cannot read property 'clientHeight' of null
      at componentDidMount (node_modules/react-height/src/ReactHeight.js:31:20)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27)
      at Object.render (node_modules/react-test-renderer/lib/ReactTestMount.js:125:18)

Do you know if this a react-collapse issue, or a react-test-renderer issue?

[nkbt]

Hi! It will not easily, since it does manipulate raw DOM all the time. You can maybe mock those things out, or better mock the whole collapse component with plain div or smth.

[msakrejda]

Ok, thanks for the quick response. We are using jsdom and jsdom-global in our tests--does that change anything?

[nkbt]

I don't think so. Any side-effect'y DOM operations should be mocked out if you ask for my opinion. And you can treat whole collapse component as a side-effect. If you look at the source code you will clearly see why - it is not as near pretty and clean as anyone (myself included) would want, but DOM is a tough nut... On Sat., 3 Dec. 2016 at 09:21, Maciek Sakrejda <notifications@github.com>

[msakrejda]

Ok, thanks. For those who got here looking for references to the same error, I ended up doing this:

const proxyquire = require('proxyquire').noCallThru()
const fakeCollapse = React.createClass({
  render() { return <div>{this.props.children}</div> }
})

const MyComponent = proxyquire('../../src/path/to/MyComponent',
                              { 'react-collapse': fakeCollapse }).default

Maybe there's something simpler but this works for us.

[nkbt]

👍 Cheers!

[fauna5]

Nice solution. I also got around it by using ReactTestUtils.renderIntoDocument which gave it a real DOM and therefore clientHeight worked ok. Not the most efficient. But gets the component tested.