酶安装组件在 i18n 中有错误答案

【问题标题】：enzyme mount component has error in i18n酶安装组件在 i18n 中有错误
【发布时间】：2018-06-15 01:18:35
【问题描述】：

我在我的组件中使用 i18n 并像这样包裹在 I18nextProvider 中：

  const wrapper = shallow(
    <I18nextProvider i18n={mockI18n}>
      <Component initState={initData} />
    </I18nextProvider>
  );

mockI18n 是：

const mockI18n = {
  t(k) {
    return k;
  },
  on() {
  },
  getFixedT(k) {
    return (k) => k;
  },
  loadNamespaces(arg) {
    return (arg) => arg;
  }
};

当我使用浅层时，这很好用。但是，我想测试一个 onChange 函数，所以我需要在嵌套的子组件中找到元素并模拟点击事件。浅层找不到元素，所以我想试试mount，但是我用mount它给我错误：

ReferenceError: t is not defined

      16 |             name="user_id"
    > 17 |             label={t('User ID')}
      18 |             type="text"
      19 |             value={this.state.user_id}

如何将 i18n 应用于子组件？或者使用 shallow 时如何测试 this.props.onChange？

【问题讨论】：

I18nextProvider 的来源以及它与 i18n 的作用是什么？
I18nextProvider 是一个包，我从 'react-i18next' 导入 { I18nextProvider };

标签： reactjs enzyme jestjs i18next

【解决方案1】：

我认为在组件内部，您需要在使用翻译的组件内部获取 t 函数。

const { t } = props;

...

只有这样你才能调用t函数。

    label={t('User ID')}

https://react.i18next.com/getting-started.html

【讨论】：