Injecting react-intl object into mounted Enzyme components for testing
<p><strong>EDIT:</strong> Solved! Scroll down for the answer</p>

<hr>

<p>In our Component tests we need them to have access to the <a href="https://github.com/yahoo/react-intl" rel="noreferrer"><code>react-intl</code></a> context. The problem is that we are mounting single components (with Enzyme's <a href="https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md" rel="noreferrer"><code>mount()</code></a>) without their <code>&lt;IntlProvider /&gt;</code> parent wrapper. This is solved by wrapping the provider around but then the <code>root</code> points to the <code>IntlProvider</code> instance and not to <code>CustomComponent</code>. </p>

<p>The <a href="https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#enzyme" rel="noreferrer">Testing with React-Intl: Enzyme</a> docs are still empty.</p>

<p><strong>&lt;CustomComponent /&gt;</strong></p>

<pre><code>class CustomComponent extends Component {
  state = {
    foo: 'bar'
  }

  render() {
    return (
      &lt;div&gt;
        &lt;FormattedMessage id="world.hello" defaultMessage="Hello World!" /&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<hr>

<p><strong>Standard Test Case (Desired)</strong> (Enzyme + Mocha + Chai)</p>

<pre><code>// This is how we mount components normally with Enzyme
const wrapper = mount(
  &lt;CustomComponent
    params={params}
  /&gt;
);

expect( wrapper.state('foo') ).to.equal('bar');
</code></pre>

<p>However, since our component uses <code>FormattedMessage</code> as part of the <code>react-intl</code> library, we get this error when running the above code: </p>

<p><code>Uncaught Invariant Violation: [React Intl] Could not find required `intl` object. &lt;IntlProvider&gt; needs to exist in the component ancestry.</code></p>

<hr>

<p><strong>Wrapping it with <code>IntlProvider</code></strong></p>

<pre><code>const wrapper = mount(
  &lt;IntlProvider locale="en"&gt;
    &lt;CustomComponent
      params={params}
    /&gt;
  &lt;/IntlProvider&gt;
);
</code></pre>

<p>This provides <code>CustomComponent</code> with the <code>intl</code> context it asks for. However, when trying to do test assertions such as these:</p>

<pre><code>expect( wrapper.state('foo') ).to.equal('bar');
</code></pre>

<p>raises the following exception:</p>

<p><code>AssertionError: expected undefined to equal ''</code></p>

<p>This ofcourse because it tries to read the state of <code>IntlProvider</code> and not our <code>CustomComponent</code>. </p>

<hr>

<h2>Attempts to access <code>CustomComponent</code></h2>

<p>I have tried the below to no avail:</p>

<pre><code>const wrapper = mount(
  &lt;IntlProvider locale="en"&gt;
    &lt;CustomComponent
      params={params}
    /&gt;
  &lt;/IntlProvider&gt;
);


// Below cases have all individually been tried to call `.state('foo')` on:
// expect( component.state('foo') ).to.equal('bar');

const component = wrapper.childAt(0); 
&gt; Error: ReactWrapper::state() can only be called on the root

const component = wrapper.children();
&gt; Error: ReactWrapper::state() can only be called on the root

const component = wrapper.children();
component.root = component;
&gt; TypeError: Cannot read property 'getInstance' of null
</code></pre>

<hr>

<p>The question is: <strong>How can we mount <code>CustomComponent</code> with the <code>intl</code> context while still being able to perform "root" operations on our <code>CustomComponent</code></strong>?</p>