`react-test-renderer` and refs

[armandabric]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
It's not possible to test component that use ref with the react-test-renderer utilitiesTesting: the refs are always null.

/* @flow */

import React from 'react';

export default class Foo extends React.Component {    
    /* the future refs */
    bar; 

    componentDidMount() {
        console.log(this.bar); // this.bar is null

        this.bar.doThings() // So this fail
    }

    render() {
        return (
            <div ref={(c) => { console.log('ref cb', c); this.bar = c; }}> {/* The callback is call but, `c` is null*/}
                <p>Hello World</p>
            </div>
        );
    }
}

import React from 'react';
import renderer from 'react-test-renderer';

it('should have valide ref', () => {
    const foo = renderer.create(<Foo />);

    expect(foo.toJSON()).toMatchSnapshot();
});

What is the expected behavior?

The ref should be usable.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• react@15.3.1
• react-dom@15.3.1
• react-test-renderer@15.3.1

Only tested with these versions.

[gaearon]

Thanks for taking the time to file an issue!

This is not a bug. react-test-renderer doesn’t actually use the browser (or jsdom), so there are no real <div>s we could give you.

If your components crash expecting some methods (like focus()), a workaround was implemented in #7649 and will be part of 15.4.0. It will work like this:

import React from 'react';
import renderer from 'react-test-renderer';

function createNodeMock() {
  // You can return anything from this function.
  // For example:
  return {
    focus() 
      // Do nothing
    }
  }
}

it('should have valid ref', () => {
    const foo = renderer.create(<Foo />, {createNodeMock});
    expect(foo.toJSON()).toMatchSnapshot();
});

createNodeMock also accepts element as an argument so you can check element.type and return different mocks, say, for <div> and <input>.

I hope this helps!

I will close because we generally close issues that are fixed in master, and we think this is an adequate solution.

[armandabric]

A warning could be added if we use react-test-renderer it on a component that need refs.

[gaearon]

Since test renderer renders deeply, I’m worried this might end up as a non-actionable warning soup. I think fixing it on a case by case basis with mocks might work out better.

[armandabric]

For now I've disable the generation of the component by doing: jest.mock('./Foo');. I will give another try with react 15.4.0. Thanks for your quick reply.

[mgadda]

@gaearon Can you recommend a workaround prior to the release of React 15.4? In my case, for instance, the component which uses ref is the one being tested, so mocking the entire component (via jest.mock) is not meaningful approach.

[gaearon]

There is no workaround prior to its release because the workaround is added in that release. 😉
Can you try react@15.4.0-rc.2 with react-test-renderer@15.4.0-rc.2?

[mgadda]

Fair enough. I'll checkout the release candidate to make sure everything is working and then sit tight until 15.4 is released.

It also occurs to me that I could refactor the component such that imperative interactions associated with refs can be pulled out into a separate component which can then be mocked.

[piecyk]

Hi, at start just want to say great work with createNodeMockto @aweary 👏

When testing some components i stumbled on some fishy behavior, basic everything works when on first render we have components rendered that has refs callbacks, but when on update we add new components with ref callbacks we got an error
TypeError: optionscreateNodeMock is not a function

dummy example

const B = React.createClass({
  onRefEl(ref) {
    console.log('ref el', ref);
  },
  _renderEl(i) {
    return (
      <span key={i} ref={this.onRefEl}>index: {i}</span>
    );
  },
  onRef(ref) {
    console.log('ref in B', ref);
  },
  render() {
    return (
      <div ref={this.onRef}>{this.props.array.map(this._renderEl)}</div>
    );
  }
});

const A = React.createClass({
  render() {
    return <div><B array={this.props.array}/></div>;
  }
});

function createNodeMock(element) {
  console.log('yee createNodeMock called');
  return '[ref object]';
}

it('dummy test', () => {
  const component = renderer.create(<A array={[0]}/>, {createNodeMock});
  let tree = component.toJSON();
  console.log('render 0', tree);

  component.update(<A array={[0, 1]}/>);
  console.log('render 1', tree);
  // TypeError: options.createNodeMock is not a function

  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

imho it's not correct behavior, after some digging i would say
https://github.com/facebook/react/blob/master/src/renderers/testing/ReactTestMount.js#L99-L121

change update to allow pass options maybe something like this:

ReactTestInstance.prototype.update = function (nextElement, options) {
  console.log("::my:update");
  invariant(this._component, "ReactTestRenderer: .update() can't be called after unmount.");
  var nextWrappedElement = React.createElement(TopLevelWrapper, { child: nextElement });
  var component = this._component;
  ReactUpdates.batchedUpdates(function () {
    var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(_assign({}, defaultTestOptions, options));
    transaction.perform(function () {
      ReactReconciler.receiveComponent(component, nextWrappedElement, transaction, emptyObject);
    });
    ReactUpdates.ReactReconcileTransaction.release(transaction);
  });
};

then in our test we can pass options, and we don't have TypeError 👍

it('dummy test', () => {
  const component = renderer.create(<A array={[0]}/>, {createNodeMock});
  let tree = component.toJSON();
  console.log('render 0', tree);

  component.update(<A array={[0, 1]}/>, {createNodeMock});
  console.log('render 1', tree);
  // no TypeError! 

  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

but it's get more complicated if we want to simulate async update by setState, then also we are missing options so our dummy will look like:

// B component is the same as above...
const A = React.createClass({
  getInitialState() {
    return {
      array: []
    };
  },
  componentDidMount() {
    setTimeout(() => {
      try {
        this.setState({array: [0]});
      } catch (error) {
        // TypeError: options.createNodeMock is not a function
        console.log(error);
      }
    }, 300);
  },
  render() {
    console.log('render A');
    return <div><B array={this.state.array}/></div>;
  }
});
// createNodeMock is the same 
it('dummy test', (done) => {
  const component = renderer.create(<A/>, {createNodeMock});
  let tree = component.toJSON();
  console.log('render 0', tree);

  setTimeout(() => {
    console.log('render 1', tree);
    tree = component.toJSON();
    expect(tree).toMatchSnapshot();
    done();
  }, 600);
});

and the hard part basic from my understating ReactUpdatesFlushTransaction.getPooled(true) sets the ReactTestReconcileTransaction.testOptions to true

How the testOptions is stored... (hard to see that in quick dig in this code 💃 maybe ReactUpdatesFlushTransactionis goo place to start?

Is this making sense at all ? or what do you think guys?

One more time awesome work with this 👏 @aweary @gaearon

[gaearon]

Let's reopen so we don't lose track of this.

[aweary]

@piecyk thanks for the details report, I'll look into this today and see what can be done 👍