Question

几周前，我开始了一个项目，该项目与我的同事一起使用React前端和ruby后端。经过几番代码审查后，有关具有非国际化应用程序的注释已反馈给我们。我们有一个使用i18n gem的国际化后端，但是被告知react的标准是使用react-intl作为前端国际化包。 我刚刚完成了国际化的编码，并使用几种语言对其进行了测试以确保其正常工作。在测试主题上，我开始遇到一个问题，我一直在用力撞墙。 我一直收到此错误：n.getChildContext不是函数。我正在使用软件包enzyme-react-intl。为了测试此方法是否有效，我决定仅对组件（功能的和基于类的）进行快照。下面是我的一个测试示例，以及我收到的测试套件故障。我所有带有 shallowWithIntl 和 mountWithIntl 的测试套件都失败了。我应该注意，我正在使用以下命令运行测试：'yarn jest -u'。从我阅读的所有搜索和api文档中，我并没有犯任何明显错误，但希望能为您的回答提供任何帮助。

以下是示例测试：

import React from 'react';
import { loadTranslation, shallowWithIntl } from 'enzyme-react-intl';
import Header from '../components/Header/Header';
loadTranslation("./app/javascript/translations/en-US.json");

describe('Parent header rendering', () => {
     const shallowHeader = shallowWithIntl(<Header />);
     it('matches the snapshot', () => {
         expect(shallowHeader).toMatchSnapshot();
     });
});

我收到的测试套件错误。

FAIL app / javascript / 测试 /Header.test.jsx ●父标头呈现›遇到声明异常

TypeError: n.getChildContext is not a function

   5 | 
   6 | describe('Parent header rendering', () => {
>  7 |     const shallowHeader = shallowWithIntl(<Header />);
     |                           ^
   8 |     it('matches the snapshot', () => {
   9 |         expect(shallowHeader).toMatchSnapshot();
  10 |     });

  at _enzyme (node_modules/enzyme-react-intl/lib/webpack:/enzyme-react-intl/src/index.js:47:12)
  at Suite.<anonymous> (app/javascript/__tests__/Header.test.jsx:7:27)
  at Object.describe (app/javascript/__tests__/Header.test.jsx:6:1)

我现在只是个反应/开玩笑/酶的菜鸟，想学习，所以无论他们在我的灵魂上吃了多少，任何指尖和批评都将受到赞赏。

谢谢！

Answer 1

与其使用当前不被getChildContext方法弃用的ases-react-intl软件包工作，而是在react-intl自述文件中引用最新的helper函数。 link to testing with enzyme。该代码是用打字稿编写的，要更改为js / jsx，只需要进行少量编辑即可。代码如下。希望这可以帮助。不要忘了评论react-intl存储库中的源代码。

import React from 'react';
import {IntlProvider} 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-US.json'); // en-US.json
const defaultLocale = 'en-US';
const locale = defaultLocale;

export function mountWithIntl(node) {
  return mount(node, {
    wrappingComponent: IntlProvider,
    wrappingComponentProps: {
      locale,
      defaultLocale,
      messages,
   },
  });
}

  export function shallowWithIntl(node) {
   return shallow(node, {
     wrappingComponent: IntlProvider,
     wrappingComponentProps: {
      locale,
      defaultLocale,
      messages,
     },
  });
}

接收到TypeError：n.getChildContext不是带有shallowWithIntl

1 个答案: