ReactTestRenderer doesn't work with refs or ReactDOM.findDOMNode

[ryanseddon]

Jest snapshot testing uses ReactTestRenderer but if my component contains a ref or uses ReactDOM.findDOMNode it throws TypeError: component.getPublicInstance is not a function.

Component

import React from 'react';

export default class Link extends React.Component {
  render() {
    return (
      <a
        ref={a => this._a = a}
        href={this.props.page || '#'}>
        {this.props.children}
      </a>
    );
  }
}

Test

'use strict'

import React from 'react';
import Link from '../Link';
import renderer from 'react-test-renderer';

describe('Link', () => {
  it('renders correctly', () => {
    const tree = renderer.create(
      <Link page="foo" />
    ).toJSON();

    expect(tree).toMatchSnapshot();
  });
});

stack trace

 FAIL  __tests__/Link-test.js (2.148s)
● Link › it renders correctly
  - TypeError: component.getPublicInstance is not a function
        at attachRef (node_modules/react/lib/ReactRef.js:20:19)
        at Object.ReactRef.attachRefs (node_modules/react/lib/ReactRef.js:42:5)
        at attachRefs (node_modules/react/lib/ReactReconciler.js:26:12)
        at CallbackQueue._assign.notifyAll (node_modules/react/lib/CallbackQueue.js:67:22)
        at ReactTestReconcileTransaction.ON_DOM_READY_QUEUEING.close (node_modules/react/lib/ReactTestReconcileTransaction.js:37:26)
        at ReactTestReconcileTransaction.Mixin.closeAll (node_modules/react/lib/Transaction.js:204:25)
        at ReactTestReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:151:16)
        at batchedMountComponentIntoNode (node_modules/react/lib/ReactTestMount.js:61:27)
        at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
        at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)

[zpao]

Thanks for the well documented issue! I'll leave it to @spicyj since he did the hard work on this.

[sophiebits]

Hm, after #7258 (which should be in 15.3.0) it give you null for any ref and should not throw. It's expected that ReactDOM.findDOMNode doesn't work.

[ryanseddon]

So would it be safe to say that snapshot testing on something like react-frame-component wouldn't work?

[KnutHelland]

Looks like React also logs a warning when using refs with react-test-renderer now:

Warning: Stateless function components cannot be given refs (See ref "main" in a component created by DummyComponent). Attempts to access this ref will fail.

caused by code similar to this example:

const DummyComponent = React.createClass({
    render() {
        return <div ref="main">content</div>;
    }
});

(I can put up an example on github if you want)

[gaearon]

So would it be safe to say that snapshot testing on something like react-frame-component wouldn't work?

It wouldn’t, but there are a few possible options:

• You can mock it out (assuming you use Jest)
• In the future test renderer could provide a first-class component mocking API out of the box, unrelated to Jest
• We could give you a mock object that looks like a DOM node but doesn’t actually do anything

Any solutions you prefer?

[traviscooperjs]

We had the same problem, but solved it using the ref callback as described (with examples) here.
https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

componentWillMount: function() {
  this._refs = {};
},
componentDidMount: function() {
  this._refs[`textRefId`].focus();
},
render: function() {
  return <TextInput ref={(c) => this._refs[`textRefId`] = c; } />;
},

[ryanseddon]

@gaearon sorry missed your comment.

We could give you a mock object that looks like a DOM node but doesn’t actually do anything

That would be the preference as I'm asserting the children of the frame component.

[aweary]

I don't think providing a mock DOM node would be the best solution here. We'd have to implement the full DOM node API so that when it's actually used it doesn't throw. It would be better if we could have an optional integration with jsdom (or whatever the user chooses to use), so that we can use a full implementation of the DOM and avoid having to implement and maintain our own mock API.