TypeError: w.default.findDOMNode is not a function

[ericclemmons]

When testing with , I get the following error for anything wrapped by a @componentQueries (which uses https://github.com/ctrlplusb/react-sizeme):

  TypeError: w.default.findDOMNode is not a function
      at i.m.value (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-sizeme/lib/react-sizeme.js:1:3247)
      at i.m.value (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-sizeme/lib/react-sizeme.js:1:2901)
      at /Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at /Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.ON_DOM_READY_QUEUEING.close (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.TransactionImpl.closeAll (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.TransactionImpl.perform (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (/Users/Eric/Projects/HigherEducation/platform/node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)

I assume that I need to mock the DOM node somehow?

http://stackoverflow.com/questions/40852131/refs-are-null-in-jest-snapshot-tests-with-react-test-renderer/40854433#40854433
https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing

Has anyone else had issues with testing out DOM-dependent components like this?

[arunoda]

cc @roonyh

[jasonmorganson]

In [email protected] create takes an extra argument to provide mocked refs.

This looks like the place to pass it in: https://github.com/storybooks/storyshots/blob/master/src/test_runner/snapshot_runner.js#L60

Still need a good way to pass the mock into the story though. Maybe something like:

function createNodeMock (element) {
  if (element.type === 'p') {
    return {};
  }
  return null;
}
const options = {createNodeMock}

storiesOf('Foo', module)
  .add('default state', () => (
    <Foo />
  ), options)

For that to work react-storybook will have to store the options on the story.

Then line 60 could pass the node mock in:

const {createNodeMock} = story.options
const renderer = ReactTestRenderer.create(tree, createNodeMock)