TypeError：intlProvider.getChildContext不是函数

Question

我在我的react功能组件中使用injectIntl​​来实现本地化。我正在使用酶/玩笑来进行单元测试。我已经复制了intl-test-helper文件，但出现错误：“ TypeError：intlProvider.getChildContext不是一个函数”

我尝试了stackflow的其他建议：1.删​​除模拟文件---我没有模拟文件2.使用const {IntlProvider} = jest.requireActual（“ react-intl”）;强制使用实际的而不是模拟的---不起作用。

反应组件是：WarningModal.jsx：

import { FormattedMessage, injectIntl } from "react-intl";
.......

const WarningModal = ({
  .........
  ...props
}) => {
  ........

export default injectIntl(WarningModal);

intlTestHelper.js文件是：

 * 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"; // eslint-disable-line import/no-extraneous-dependencies

/** Create the IntlProvider to retrieve context for wrapping around. */
function createIntlContext(messages, locale) {
  const { IntlProvider } = jest.requireActual("react-intl");
  const intlProvider = new IntlProvider({ messages, locale }, {});
  const { intl } = intlProvider.getChildContext();
  return intl;
}

/** When using React-Intl `injectIntl` on components, props.intl is required. */
function nodeWithIntlProp(node, messages = {}, locale = "en") {
  return React.cloneElement(node, {
    intl: createIntlContext(messages, locale)
  });
}

/**
 * Create a shadow renderer that wraps a node with Intl provider context.
 * @param {ReactComponent} node - Any React Component
 * @param {Object} context
 * @param {Object} messages - A map with keys (id) and messages (value)
 * @param {string} locale - Locale string
 */
export function shallowWithIntl(
  node,
  { context } = {},
  messages = {},
  locale = "en"
) {
  return shallow(nodeWithIntlProp(node), {
    context: Object.assign({}, context, {
      intl: createIntlContext(messages, locale)
    })
  });
}

/**
 * Mount the node with Intl provider context.
 * @param {Component} node - Any React Component
 * @param {Object} context
 * @param {Object} messages - A map with keys (id) and messages (value)
 * @param {string} locale - Locale string
 */
export function mountWithIntl(
  node,
  { context, childContextTypes } = {},
  messages = {},
  locale = "en"
) {
  return mount(nodeWithIntlProp(node), {
    context: Object.assign({}, context, {
      intl: createIntlContext(messages, locale)
    }),
    childContextTypes: Object.assign({}, { intl: intlShape }, childContextTypes)
  });
}

在这里我如何使用它来测试：

import React from "react";
import { _WM as WarningModal } from "../components/WarningModal";
// import { shallow } from "enzyme";
import { mountWithIntl } from "../utils/intlTestHelper.js";

describe("<WarningModal />", () => {
  const props = {
    discardChanges: jest.fn(),
    saveChanges: jest.fn(),
    closeWarningModal: jest.fn(),
    intl: { formatMessage: jest.fn() }
  };

  it("should have heading", () => {
    const wrapper = mountWithIntl(<WarningModal {...props} />);
    expect(wrapper.find(".confirm-title")).toBeTruthy();
  });
});

错误：

 ● <WarningModal /> › should have heading

    TypeError: intlProvider.getChildContext is not a function

      14 |   const { IntlProvider } = jest.requireActual("react-intl");
      15 |   const intlProvider = new IntlProvider({ messages, locale }, {});
    > 16 |   const { intl } = intlProvider.getChildContext();
         |                                 ^
      17 |   return intl;
      18 | }
      19 | 

      at getChildContext (src/utils/intlTestHelper.js:16:33)
      at createIntlContext (src/utils/intlTestHelper.js:23:11)
      at nodeWithIntlProp (src/utils/intlTestHelper.js:60:16)
      at Object.<anonymous> (src/tests/WarningModal.spec.js:29:21)

请在此照亮一些灯光。谢谢。

Answer 1

[https://github.com/formatjs/react-intl/blob/master/docs/Testing-with-React-Intl.md包含使用createIntl的新指令