Enzyme: shallow rendering: ref mock builder

[charlierudolph]

Just an idea I had which is I believe the minimal I need in order to be to test some functionality with refs while still being able to use shallow rendering.

describe('refMockBuilder', () => {
  it('calls it for each ref with the a wrapper for the element', () => {
    const SimpleComponent = React.createClass({
      focus() {
        this.textInput.focus();
      },
      render() {
        return (
          <div>
            <input id='name' type='text' ref={(node) => { this.textInput = node; }} />
            <button onClick={this.focus}></button>
          </div>
        );
      }
    });
    mocks = {}
    const refMockBuilder = (wrapper) => {
      return mocks[wrapper.props().id] = {focus: sinon.stub()}
    }
    const wrapper = shallow(<SimpleComponent />, { refMockBuilder });
    wrapper.find('button').simulate('click')
    expect(mocks['name'].focus).to.have.been.called
  });
});

I'm happy to try and implement this if you like the idea.

[ljharb]

Why the id?

[charlierudolph]

The id is just being used as an example of a way to tell refs apart (in case you had multiple)

[aweary]

react-test-renderer has an API for this called createNodeMock. If we supported this, it would be nice if it was consistent with that API.

[jquintozamora]

Do you have any plans to support createNodeMock on enzyme mount ?