Invariant Violation: getNodeFromInstance: Invalid argument.

[VovaMukovozov]

I'm following the example at https://facebook.github.io/jest/docs/tutorial-react.html#content in order to use snapshots with jest.

Code:

...
  handleSizeChange ({width}) {
    if(this.state.changeFlag){
      this.setState({segmentsSize: this.state.segmentsSize += width }, this.renderNav);
    }
  }

  renderSegments() {
    const { segments } = this.props.trip;
    return segments.map((segment, i) => {
      const Segment = components[segment.typeDescription];
      return (
        <div key={`segment_${i}`}>
          <Measure onMeasure={this.handleSizeChange} >
            <Segment segment={segment} />
          </Measure>
        </div>
      );
    });
  }
...
render() {
  return(
    {
      his.renderNav()
    }
 )
}
export default FeaturedTrip;

Unit test:

describe('<FeaturedTrip />', () => {
  it('should not faild', () => {
    const component = renderer.create(
      <FeaturedTrip trip={ timeLineTrip } windowSize={ 1920 }/>
    );
    let tree = component.toJSON();
    console.log(tree);
  });
});

Error code:

    Invariant Violation: getNodeFromInstance: Invalid argument.
      
      at invariant (node_modules/fbjs/lib/invariant.js:44:15)
      at Object.getNodeFromInstance (node_modules/react-dom/lib/ReactDOMComponentTree.js:162:77)
      at Object.findDOMNode (node_modules/react-dom/lib/findDOMNode.js:49:41)
      at Measure._setDOMNode (node_modules/react-measure/lib/Measure.js:132:39)
      at Measure.componentDidMount (node_modules/react-measure/lib/Measure.js:99:12)
      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)
      at Object.<anonymous> (tests/components/featuredTrip.test.js:12:75)

[souporserious]

Sorry, unfortunately I do not have any experience with Jest 😕 I noticed a typo in your render method his.renderNav(), maybe it's that? Please let me know if you find a solution, I'll try and look at this when I get a chance.

[VovaMukovozov]

this.renderNav() it's typo but it's not problem, i get an error just if run unit test.
I use react-test-renderer for rendering components in test mode. I'll let you know if find a solution. Thanks

[postrad]

I've run into the same problem when writing a Jest snapshot for a component I've built that uses Measure. Also Measure fails to capture results when using Enzyme's mount() to test the component.

[souporserious]

@postrad any ideas on how we can make Jest work with the Measure component?

[ArielZhang]

I have the same issue...

[ArielZhang]

facebook/react#8324

seems the same issue, should use refs but not findDOMNode()

[ArielZhang]

@souporserious can you help fix this ?

[fcsonline]

I'm facing the same issue. I created this PR, but I'm not really sure if this is the best approach.

#41

Could you review it, please?

[sontek]

Also something I'm experiencing, #41 looks promising. Any update on if that could be accepted?

[souporserious]

Sorry just saw this, I'm trying to determine the best way to handle this and get rid of findDOMNode without having to add an additional node. One thing I was thinking was generating a data tag or something that we can then query and send to the ResizeObserver.

[souporserious]

Alright, I think I finally have an idea how we can make this work. Pretty simple addition, you will just be required to pass a ref argument down to your component so React Measure can obtain a proper DOM node. This will only work with a child function so I will probably deprecate the original wrapper.

It would look something like this:

<Measure onMeasure={this.handleSizeChange}>
  { {{ ref }) =>
    <div ref={ref}>
      ...
    </div>
  }
</Measure>

[ejames17]

im facing the same issue.

[souporserious]

Jest testing should finally work! Please see the latest release. I did a full rewrite, there is no more findDOMNode 🎉 you just need to make sure to pass the measureRef function down to the component you want measured.