Testing with React-Intl

Hi. I’m trying to use snapshot testing for components that use React-Intl (https://github.com/yahoo/react-intl). I tried following a similar approach to how we’d set it up using Enzyme (https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#enzyme):

import React from 'react';
jest.mock('react-dom');
import renderer from 'react-test-renderer';
import { IntlProvider } from 'react-intl';

const messages = require('../../build/lang/en-US.json');
const intlProvider = new IntlProvider({ locale: 'en', messages }, {});
const { intl } = intlProvider.getChildContext();

function nodeWithIntlProp(node) {
  return React.cloneElement(node, { intl });
}

const rendererWithIntl = (node) => {
  return renderer.create(nodeWithIntlProp(node), { context: { intl } });
};


export {
  rendererWithIntl,
};

and then my tests:

import React from 'react';
jest.mock('react-dom');
import { rendererWithIntl } from 'utils/tests';
import Item from './Item';

describe('<Item /> - snapshot', () => {
  it('renders the default Item', () => {
    const component = rendererWithIntl(
      <Item
        items={ [{ id: '1', text: '123' }] }
        selectItem={ () => {} }
      />
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

it keeps throwing an error saying Invariant Violation: [React Intl] Could not find requiredintlobject. <IntlProvider> needs to exist in the component ancestry.. So it looks like I’m not defining the intl context properly using renderer.create. Wondering if you have any tips for how to create the intl context using react-test-renderer’s renderer?