Shallow throws Invariant violation: Unable to find node on an unmounted component

[lmerotta-zz]

Describe the bug
When using shallow to test a component that uses ReactDOM.findDOMNode(this) in componentDidMount, the following error is thrown:

To Reproduce
Steps to reproduce the behavior:

1. Use the following component :

export class TipeeTopbar extends Component {

  DOMElement = null

  componentDidMount() {
    this.DOMElement = ReactDOM.findDOMNode(this)
  }

  componentWillUnmount() {
    this.DOMElement = null
  }

  render() {
    return (
      <div>
            /* ... */
      </div>
    )
  }
}

2. Use the following test with latest versions of enzyme and enzyme-adapter-react-16:

it('Renders everything if all conditions succeed SHALL', () => {

    const isModuleActive = () => true,
      getConfig = () => ( { show_birthdates: true }),
      component = shallow(
        <TipeeTopbar getConfig={getConfig} isModuleActive={isModuleActive} />
      )


    expect(component).toMatchSnapshot()
    expect(component.find(QualityBookmarks).length).toEqual(1)
    expect(component.find(PersonsBirthdays).length).toEqual(1)

  })

3. See the following error and stacktrace

Topbar unit tests › Renders everything if all conditions succeed

    Invariant Violation: Unable to find node on an unmounted component.
      
      at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)
      at findHostInstance (node_modules/react-dom/cjs/react-dom.development.js:17504:7)
      at Object.findDOMNode (node_modules/react-dom/cjs/react-dom.development.js:17974:12)
      at TipeeTopbar.componentDidMount (src/core/components/topbar/Topbar.js:88:73)
      at node_modules/enzyme/build/ShallowWrapper.js:215:22
      at Object.batchedUpdates (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:474:22)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:214:26)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.it (src/__tests__/core/components/topbar/Topbar.test.js:21:37)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>

Expected behavior
The test runs correctly and shallow mounts the component

Desktop (please complete the following information):

• OS: MacOS High Sierra
• Browser: none (Terminal)

[koba04]

Yes, because ReactShallowRenderer doesn't support ReactDOM.findDOMNode.
I think shallow is not a good option to test DOM operations.
In this case, I recommend to use mount or shallow with disableLifecycleMethods option.

[ljharb]

Indeed, you need to use mount to test things with the DOM.

Separately, instead of findDOMNode, you should be using a ref callback, or createRef.