РЕДАКТИРОВАТЬ: Решено! Прокрутите вниз для ответа

В наших тестах компонентов нам нужен доступ кreact-intl контекст. Проблема в том, что мы монтируем отдельные компоненты (с помощью ферментаmount()) без их<IntlProvider /> родительская обертка. Это решается путем обертывания провайдера, но затемroot указывает наIntlProvider экземпляр, а неCustomComponent.

Тестирование с помощью React-Intl: Enzyme документы все еще пусты.

<CustomComponent />

class CustomComponent extends Component {
  state = {
    foo: 'bar'
  }

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

Стандартный тестовый пример (желательно) (Фермент + мокко + чай)

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

expect( wrapper.state('foo') ).to.equal('bar');

Тем не менее, так как наш компонент используетFormattedMessage как частьreact-intl библиотека, мы получаем эту ошибку при запуске приведенного выше кода:

Uncaught Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

Заворачивая это сIntlProvider

const wrapper = mount(
  <IntlProvider locale="en">
    <CustomComponent
      params={params}
    />
  </IntlProvider>
);

Это обеспечиваетCustomComponent сintl контекст, который он просит. Тем не менее, при попытке сделать тестовые утверждения, такие как эти:

expect( wrapper.state('foo') ).to.equal('bar');

выдвигает следующее исключение:

AssertionError: expected undefined to equal ''

Это конечно, потому что он пытается прочитать состояниеIntlProvider а не нашCustomComponent.

Попытки доступаCustomComponent

Я пробовал ниже, но безрезультатно:

const wrapper = mount(
  <IntlProvider locale="en">
    <CustomComponent
      params={params}
    />
  </IntlProvider>
);


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

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

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

const component = wrapper.children();
component.root = component;
> TypeError: Cannot read property 'getInstance' of null

Вопрос в том:Как мы можем смонтироватьCustomComponent сintl контекст, все еще будучи в состоянии выполнять «корневые» операции на нашемCustomComponent?