testing 'getNodeFromInstance: Invalid argument' error

[yonatanmn]

I'm building a demo application with create-react-app and mobx, quite similar to this project

When I try to test it, with simulate click that change some observable, it throws an error, That's the test:

   const  wrapper = shallow(<App/>);
   const plusBtn = wrapper.find('.counterIncrement');
   plusBtn.simulate('click');
   // fails here, with 'Invariant Violation: getNodeFromInstance: Invalid argument.'
   expect(...)

the react element has:

class App extends Component {
render (){
 return (
  <div className="App">
   <span> {counter.count} </span>
   <button className='counterIncrement' onClick={counter.increment}> + </button>
  </div>
 )}
}
export default observer(App)

and counter is:

class CounterStore {
  constructor() {
    extendObservable(this, {
      count2: 0,
    });
    this.increment = this.increment.bind(this)
  }

  increment() {     this.count++;   }
};
export const counter = new CounterStore();

if counter.increment is not changing counter.count it's not throwing,
also if <App>.render is not using counter.count it's not throwing
this is throwing only for simulate. Other jest/enzyme stuff is ok so far.
edit: actually, even when calling counter.increment or counter.count = 2 without simulate - from normal JS call, it throws.

My stack:

 [email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]

full error:

 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 findDOMNode (node_modules\mobx-react\index.js:217:54)
      at reportRendering (node_modules\mobx-react\index.js:222:15)
      at App.componentDidUpdate (node_modules\mobx-react\index.js:409:8)
      at measureLifeCyclePerf (node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
      at node_modules\react-dom\lib\ReactCompositeComponent.js:729:11
      at CallbackQueue.notifyAll (node_modules\react-dom\lib\CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules\react-dom\lib\ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules\react-dom\lib\Transaction.js:206:25)
      at ReactReconcileTransaction.perform (node_modules\react-dom\lib\Transaction.js:153:16)
      at ReactUpdatesFlushTransaction.perform (node_modules\react-dom\lib\Transaction.js:140:20)
      at ReactUpdatesFlushTransaction.perform (node_modules\react-dom\lib\ReactUpdates.js:89:32)
      at Object.flushBatchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:172:19)
      at ReactDefaultBatchingStrategyTransaction.closeAll (node_modules\react-dom\lib\Transaction.js:206:25)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-dom\lib\Transaction.js:153:16)
      at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
      at batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
      at node_modules\enzyme\build\ShallowWrapper.js:802:45
      at withSetStateAllowed (node_modules\enzyme\build\Utils.js:224:3)
      at ShallowWrapper.simulate (node_modules\enzyme\build\ShallowWrapper.js:799:42)
      at Object.it (src\components\App.test.js:49:13)

thanks

[mweststrate]

Caused here:

mobx-react/src/observer.js

Line 27 in 3460acf

const node = findDOMNode(component);

Related issue:
facebook/react#7371

[mweststrate]

Could you verify whether 4.1.3 fixes this issue? Thanks!

[yonatanmn]

@mweststrate - I have 4.1.0, but solved the problem by removing the boilerplate test I had:

 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
 });

once removed the problem disappears.