Тестирование реакции с использованием фермента

Question

Я пытаюсь проверить React-Intl с помощью фермента. У меня 1 язык французский и английский. Мой App.js выглядит следующим образом.

import React from 'react'
import PropTypes from 'prop-types'
import LocaleDropDown from './components/LocaleDropDown'
import {FormattedDate, FormattedTime, FormattedNumber, injectIntl} from 'react-intl'
function App ({children}) {
  return (
    <div className="container-fluid">
      {children}
      <div className = "date-time-wrapper">
        <span>Date: </span><FormattedDate value={new Date()}/><br/>
        <span>Time: </span><FormattedTime value={new Date()}/><br/>
        <span>Number: </span><FormattedNumber value={1000}/><br/><br/>
      </div>
      <LocaleDropDown/>
    </div>
  )
}

App.propTypes = {
  children: PropTypes.node.isRequired
}

export default injectIntl(App)

Мой app.spec.js

    import React from 'react'
    import ReactDOM from 'react-dom'
    import { shallow } from 'enzyme'
    import sinon from 'sinon'
    import { addLocaleData, IntlProvider } from 'react-intl'
    import App from './App'
    import RecipeList from './recipes/RecipeList/RecipeList'
    import {shallowWithIntlForApp} from './recipes/helpers/intl-test'
    import fr from './locales/fr.json'

    describe('App', () => {
      it('renders without crashing', () => {
        const div = document.createElement('div')
        ReactDOM.render(<IntlProvider locale="en"><App/></IntlProvider>, div)
      })

  it('renders french text when locale is french', () => {

    const locale = 'fr'
    const langData = {'fr': fr}
    const messages = langData[locale]
    const intlProvider = new IntlProvider({ locale: 'fr', messages}, {})
    const { intl } = intlProvider.getChildContext()
    const wrapper = shallowWithIntlForApp(<App/>, { intl }).first().shallow()
    const date1 = wrapper.find('div.date-time-wrapper').childAt(1)
    console.log(date1.render().text())
    })
  })

Моя вспомогательная функция - intl-test.js

import React from 'react'
import { IntlProvider, intlShape } from 'react-intl'
import { mount, shallow } from 'enzyme'
import Cookie from 'js-cookie'
import en from '../../locales/en.json'
const locale = Cookie.get('locale') || 'en'
const messages = en[locale]
const intlProvider = new IntlProvider({ locale: 'en', messages }, {})
const { intl } = intlProvider.getChildContext()

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

export function shallowWithIntl (node) {
  return shallow(nodeWithIntlProp(node), { context: { intl } })
}

export function shallowWithIntlForApp (node, {intl}) {
  return shallow(nodeWithIntlProp(node), { context: { intl } })
}

export function mountWithIntl (node) {
  return mount(nodeWithIntlProp(node), {
    context: { intl },
    childContextTypes: { intl: intlShape }
  })
}

Я ожидаю, что строка console.log(date1.render(). Text()) выдаст мне дату в формате "fr", но она не удалась. он говорит "Нарушение инварианта: [React Intl] Не удалось найти необходимое intl объект. должен существовать в предке компонента. "Что здесь не так? Я предполагал, что добавление"first().shallow()"исправит эту конкретную ошибку, но это не так