react: ReactTestRenderer doesn't work with refs or ReactDOM.findDOMNode

This is not a bug. As explained above it is intentional.

The workaround is simple if you use jest. Just mock the third party component causing issues.

For example:

jest.mock('third-party-button', () => 'ThirdPartyButton');

Put this at the top of your test file.

Now any imports of third-party-button (replace this with your component) will become a string (e.g. ThirdPartyButton) so the component will become a “leaf” in the snapshot, like a div. Of course this won’t actually test it, but it makes sense to only test your own code.

For libraries exporting multiple components, the workaround is similar but you’d want to provide a different mock. Something like:

jest.mock('third-party-lib', () => {
  return {
    ThirdPartyButton: 'ThirdPartyButton',
    OtherThing: 'OtherThing',
  };
}));

Finally, as last option, you can mock react-dom itself.

jest.mock('react-dom', () => ({
  findDOMNode: () => ({}),
});

Note you can return anything there and adjust it to match the expectations of the tested code.

All of this works if you use Jest. Unfortunately I don’t have good solutions for other runners.

Mocking refs and canvas was easy using:

jest.mock('react-dom', () => ({
    findDOMNode: () => ({
      getContext: jest.fn(),
    }),
  })
);

Is there any idea how to overcome this bug? I have few third party components (like https://github.com/ericgio/react-bootstrap-typeahead/) which uses ReactDOM.findDOMNode how could I use jest snapshots with them?

Refs work with test renderer in master, and you can even mock them to return something else instead of null:

import React from 'react';

export default class MyInput extends React.Component {
  componentDidMount() {
    this.input.focus();
  }
  render() {
    return (
      <input ref={node => this.input = node} />
    );
  }
}

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

function createNodeMock(element) {
  if (element.type === 'input') {
    return {
      focus() {},
    };
  }
  return null;
}

it('renders correctly', () => {
  const tree = renderer.create(
    <MyInput />,
    {createNodeMock}
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

There are no plans to support findDOMNode() in test renderer because it should be agnostic of React DOM and there is no way to implement it in a way that won’t break in the future.

What is the recommended heuristic to detect that findDOMNode won’t work, in order to take a different code path? (try / catch could work but isn’t very clear)

Edit: to elaborate: this is for a component library, so mocking (inside the library at least) is not an option

@romanoff

React test renderer is not coupled to React DOM. It can’t “guess” which DOM APIs your component relies on. You need to mock the nodes yourself, as noted in 15.4.0 release notes. I hope this helps!

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

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.

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?