How to use the react-intl.IntlProvider function in react-intl

// See https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#enzyme

/**
 * Components using the react-intl module require access to the intl context.
 * This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 */

import React from 'react'
import { IntlProvider } from 'react-intl'
import { mount, shallow } from 'enzyme'
import messages from '@zap/translations/en.json'
import { intlShape } from '@zap/i18n'
// Create the IntlProvider to retrieve context for wrapping around.
const intlProvider = new IntlProvider({ locale: 'en', messages }, {})
const { intl } = intlProvider.getChildContext()

// nodeWithIntlProp - When using React-Intl `injectIntl` on components, props.intl is required.
const nodeWithIntlProp = node => {
  return React.cloneElement(node, { intl })
}

export const shallowWithIntl = (node, { context, ...additionalOptions } = {}) => {
  return shallow(nodeWithIntlProp(node), {
    context: Object.assign({}, context, { intl }),
    ...additionalOptions,
  })
}

export const mountWithIntl = (node, { context, childContextTypes, ...additionalOptions } = {}) => {
  return mount(nodeWithIntlProp(node), {

* Based on: https://gist.github.com/mirague/c05f4da0d781a9b339b501f1d5d33c37/
 *
 * Components using the react-intl module require access to the intl context.
 * This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 */

import React from 'react';
import { IntlProvider, intlShape } from 'react-intl';
import { mount, shallow } from 'enzyme';


// Create the IntlProvider to retrieve context for wrapping around.
// NOTE: Phantomjs requires usage of `var`
var intlProvider = new IntlProvider({ locale: 'en' }, {}); // eslint-disable-line
var intl = intlProvider.getChildContext(); // eslint-disable-line

/**
 * When using React-Intl `injectIntl` on components, props.intl is required.
 */
function nodeWithIntlProp(node) {
  return React.cloneElement(node, intl);
}

/**
 * Export these methods.
 */
export function shallowWithIntl(node) {
  return shallow(nodeWithIntlProp(node), { context: intl });
}

/**
 * Components using the react-intl module require access to the intl context.
 * This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 */

import React from 'react'
import { IntlProvider, intlShape } from 'react-intl'
import { mount, shallow } from 'enzyme'

// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
const messages = require('../translations/en') // en.json

// Create the IntlProvider to retrieve context for wrapping around.
const intlProvider = new IntlProvider({ locale: 'en', messages }, {})
const { intl } = intlProvider.getChildContext()

/**
 * When using React-Intl `injectIntl` on components, props.intl is required.
 */
function nodeWithIntlProp (node) {
  return React.cloneElement(node, { intl })
}

export function shallowWithIntl (node, { context, ...additionalOptions } = {}) {
  return shallow(
    nodeWithIntlProp(node),
    {
      context: Object.assign({}, context, { intl }),
      ...additionalOptions
    }

* This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 *
 * https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl
 */

import React from 'react'
import { IntlProvider, intlShape } from 'react-intl'
import { mount, shallow } from 'enzyme'

// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
const messages = require('../../assets/locales/en/main.json')

// Create the IntlProvider to retrieve context for wrapping around.
const intlProvider = new IntlProvider({ locale: 'en', messages }, {})
const { intl } = intlProvider.getChildContext()

/**
 * When using React-Intl `injectIntl` on components, props.intl is required.
 */
function nodeWithIntlProp (node) {
  return React.cloneElement(node, { intl })
}

export function shallowWithIntl (node, { context, ...additionalOptions } = {}) {
  return shallow(
    nodeWithIntlProp(node),
    {
      context: Object.assign({}, context, { intl }),
      ...additionalOptions
    }

/**
 * Components using the react-intl module require access to the intl context.
 * This is not available when mounting single components in Enzyme.
 * These helper functions aim to address that and wrap a valid,
 * English-locale intl context around them.
 */

import React from 'react'
import { IntlProvider, intlShape } from 'react-intl'
import { mount, shallow, render } from 'enzyme'

// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
import messages from '../lang/en'

// Create the IntlProvider to retrieve context for wrapping around.
const intlProvider = new IntlProvider({ locale: 'en', messages }, {})
export const { intl } = intlProvider.getChildContext()

/**
 * When using React-Intl `injectIntl` on components, props.intl is required.
 */
const nodeWithIntlProp = node => {
  return React.cloneElement(node, { intl })
}

export const shallowWithIntl = node => {
  return shallow(nodeWithIntlProp(node), { context: { intl } })
}

export const mountWithIntl = node => {
  return mount(nodeWithIntlProp(node), {
    context: { intl },

import { configure, shallow, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { IntlProvider, FormattedRelative, intlShape } from "react-intl";
import React from "react";

/**
 * This setup file configures the Enzyme Adapter and is executed before running the tests
 * https://facebook.github.io/create-react-app/docs/running-tests#initializing-test-environment
 */
configure({ adapter: new Adapter() });

const intlProvider = new IntlProvider({ locale: "en" }, {});
const { intl } = intlProvider.getChildContext();
global.intl = intl;

//https://medium.com/@sapegin/testing-react-intl-components-with-jest-and-enzyme-f9d43d9c923e
// `intl` prop is required when using injectIntl HOC
const nodeWithIntlProp = node => React.cloneElement(node, { intl });

// shallow() with React Intl context
global.shallowWithIntl = (node, { context, ...options } = {}) => {
  return shallow(nodeWithIntlProp(node), {
    ...options,
    context: {
      ...context,
      intl
    }
  });

import { IntlProvider, intlShape } from 'react-intl';

const locale = 'en-US';
const intlProvider = new IntlProvider({ locale }, {});
const { intl } = intlProvider.getChildContext();

const shallowContext = { context: { intl }, lifecycleExperimental: true };
const mountContext = { context: { intl }, childContextTypes: { intl: intlShape }, lifecycleExperimental: true };

const intlContexts = { shallowContext, mountContext };

export default intlContexts;

if (opts.full) {
        kakapoAssets.sounds.map(_s => {
          sounds = set(lensProp(_s.file), { ..._s }, sounds);
          return sounds;
        });
      }
      return { sounds };
    }
    case 'settings': {
      return { settings: {} };
    }
    case 'location': {
      return { location: { pathname: '' } };
    }
    case 'intl': {
      const intlData = new IntlProvider(getIntlProps(), {});
      return intlData.getChildContext();
    }
    default: {
      return {};
    }
  }
};

export function createIntlContext({ locale = 'zh-CN', messages = {} }) {
  const intlProvider = new IntlProvider({ locale, messages });
  const { intl: _intl } = intlProvider.getChildContext();
  intl = _intl;
  return intl;
}