[ReactDOM] Add strict mode test for findDOMNode

[eps1lon]

#13841 deprecated presumably "all usage" of findDOMNode. This is not the case if passed a host component¹. I wanted to verify if this is intended or not since we have a use case for not issuing a deprecation warning for host components:

We have a component library that lets the user pass a custom component that is rendered. It can be a different DOM node or an actual component:

class LibraryComponent() {
  // this is incomplete. It's just one instance where we get it
  componentDidMount() {
    this.button = ReactDOM.findDOMNode(this);
    listenForFocusKeys(ownerWindow(this.button));

    if (this.props.action) {
      this.props.action({
        focusVisible: () => {
          this.setState({ focusVisible: true });
          this.button.focus();
        },
      });
    }
  }

  render() {
    const { as: Component } = this.props;
	return <Component />
  }
}

However we required the DOM node of the rendered component for focus handling (essentially adding a focus-visible polyfill). Before deprecation we used findDOMNode(this). Now that findDOMNode is deprecated we want to move away from that usage while enabling some backwards compatibility:

class LibraryComponent() {
+ buttonRef = React.createRef();
  // this is incomplete. It's just one instance where we get it
  componentDidMount() {
-   this.button = ReactDOM.findDOMNode(this);
-   listenForFocusKeys(ownerWindow(this.button));
+   listenForFocusKeys(ownerWindow(this.getButtonNode()));

    if (this.props.action) {
      this.props.action({
        focusVisible: () => {
          this.setState({ focusVisible: true });
-         this.button.focus();
+         this.getButtonNode().focus();
        },
      });
    }
  }
  
+ getButtonNode() {
+   return ReactDOM.findDOMNode(this.buttonRef.current);
+ }

  render() {
    const { as: Component } = this.props;
-	return <Component />
+	return <Component ref={this.buttonRef} />
  }
}

This change:

1. is breaking usage with function components <LibraryComponent as={SomeFunctionComponent} />
2. strict mode compatible with <LibraryComponent as="div" /> or any other host component or ref forwarding component
3. not strict mode ready but also not breaking for <LibraryComponent as={SomeClassComponent} />

The test added with this PR is basically ensuring the third behavior.

Followup on #13841 (comment)

¹ Not sure if this is the correct term.

[eps1lon]

Would this also match a potential future warning? I had the full message originally but I'm not sure how it would actually look like

Suggested change

	expect(() => ReactDOM.findDOMNode(child)).not.toWarnDev(['**']);
	expect(() => ReactDOM.findDOMNode(child)).not.toWarnDev(['Warning: findDOMNode is deprecated in StrictMode.**']);

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS against 6b01aa1

[stale]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[eps1lon]

Still active

[sizebot]

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 2469628

[sizebot]

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 2469628

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2469628:

Sandbox	Source
distracted-night-8gf82	Configuration

[eps1lon]

Closing due to lack of interest. We test this compatibility layer in our own code base on React canaries.