TypeError: w.default.findDOMNode is not a function

[shilman]

Issue by ericclemmons
Tuesday Nov 29, 2016 at 20:49 GMT
Originally opened as storybook-eol/storyshots#58

---

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?

[shilman]

Comment by arunoda
Wednesday Nov 30, 2016 at 02:14 GMT

---

cc @roonyh

[shilman]

Comment by jasonmorganson
Wednesday Dec 07, 2016 at 19:53 GMT

---

In React@v15.4.0 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)

[theinterned]

I made PR on the old storyshots repo that resolve this issue: storybook-eol/storyshots#98

[tmeasday]

It's now possible to set a (admittedly global) createNodeMock via the storyshots test option.

Obviously people will probably want to do it per-test, which is probably better described by the dupe issue #881. Let's have the discussion there, closing this.

[renanvalentin]

Hey guys, I'm having the same problem but I'm stuck with the old version:

    "@kadira/storybook": "^2.35.3",
    "@kadira/storyshots": "^2.1.0"

Do you have any suggestions?

[tmeasday]

Hmm, I don't really think there's any way to get around it in the old storyshots. You could do something hacky like monkey patch ReactTestRenderer.create?

[renanvalentin]

@tmeasday thanks for the tip!! It seems that my problem is related to jsdom:

react-dates/react-dates#528

[renanvalentin]

I've solved it by patching ReactDOM and ReactTestRenderer:
https://gist.github.com/renanvalentin/0472aa5ac4769ce5ec1b2f91f60e78fc