Unable to find node on an unmounted component

[expobrain]

With Enzyme 3.x and React 16 the following code stopped working:

import React from 'react'
import ReactDOM from 'react-dom'
import { shallow } from 'enzyme'


class MyComponent extends React.Component {

  componentDidMount() {
    const node = ReactDOM.findDOMNode(this)  // <--- error here
  }

  render() {
    return <span>Hello</span>
  }
}


describe('test', () => {

  it('shallow render', () => {
    const wrapper = shallow(<MyComponent />)

    expect(wrapper.find('span').text()).toBe('Hello')
  })
})

Now the error is:

 Invariant Violation: Unable to find node on an unmounted component.

[ljharb]

First, componentDidMount should be an instance method, not an own property - just componentDidMount() {

However, I'm not sure why that would cause this issue. Does it work with react 15 and enzyme 3?

[expobrain]

@ljharb I was playing around with the implementation of componentDidMount() an I posted the incorrect one. I've updated the code for completeness.

I've tested with React 15 and and Enzyme 3.2 and the error is sligthly different:

 Invariant Violation: getNodeFromInstance: Invalid argument.

Is this facebook/react#7371 probably the cause?

[koba04]

In enzyme v3, shallow calls all lifecycle methods by default.
When you don't want to call componentDidMount, you can use disableLifecycleMethods option.

shallow(<MyComponent />, {disableLifecycleMethods: true}); 

[ljharb]

@expobrain yes, I think that is the cause. We may need to add functionality to the react adapters for 15+ to support https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing.

[expobrain]

@ljharb cool, thank you. In the meanwhile I can apply @koba04 solution to my code

[dschinkel]

So far Enzyme 3 has been fine and I test a LOT. I use it in React 16 just fine.

[dj-marko]

@expobrain but what if you wanted to test lifecycle method ?

[expobrain]

@dj-marko "when I do it I do it on production"(tm) :-)

TBF on my test I din't had yet the need to test the lifecycle method yet, however when I'll need it I'll check again with the latest version of enzyme+enzyme-adapter-react-16 can support them or not yet.

[cantino]

I'm running into this same issue with mount.

[EthanJStark]

Updating enzyme-adapter-react-16 to 1.5.0 solved this for me; see #1813 .

[ljharb]

Closing; happy to reopen if it's still reproducible on latest enzyme/adapters.

[lmerotta-zz]

I'm using shallow() to render my component in one of my tests, and unless I disable lifecycle callbacks I get the same error. Here is an excerpt of my code:

componentDidMount() {
    this.DOMElement = ReactDOM.findDOMNode(this) // <-- this breaks
    this.scrollElement.addEventListener("scroll", lodash.throttle(() => {
      this.hasScrolled();
    }, 200))
}

and my test:

const component = shallow(<TipeeTopbar getConfig={getConfig} isModuleActive={isModuleActive} />)


expect(component).toMatchSnapshot()

If I add {disableLifecycleMethods: true} to shallow() it works fine, but I need to test the lifecycles, and the scroll handler added in componentDidMount(). I already tried updating enzyme-adapter-react-16 to 1.5.0 but that doesn't change anything

[ljharb]

I’d expect that, since you’d need a DOM available to find a DOM node. You’ll either have to use jsdom, or disable lifecycle methods for that test.

[lmerotta-zz]

I am using jsdom actually when running my tests, but unfortunately it doesn't change anything.

[ljharb]

Can you file a new issue, and include component code as well as the stack trace when it breaks?

[lmerotta-zz]

Sure! Here it is: #1835