用酶测试 react-intl 组件

Question

我已经研究了 react-intl 的建议，但它没有为 enzyme 留下任何明确的文档。

这就是我一直尝试编写测试的方式。

import {IntlProvider} from 'react-intl';

const intlProvider = new IntlProvider({locale: 'en'}, {});
const intl = intlProvider.getChildContext();
const customMessage = shallow(<CustomMessage />, { options: { context: intl } });

但我一直收到错误

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

我查看了他们的回购协议，他们似乎有 made it work 和 'react-addons-test-utils'。

我是不是做错了什么？

Answer 1

我使用

让它工作

const customMessage = shallow(<CustomMessage />, { context: intl });

相反。

Answer 2

我已经发布了一个类似问题的答案：

您可以 import { shallowWithIntl } from 'intl-helper' 然后使用 shallowWithIntl() 而不是 Enzyme 的 shallow()。

Answer 3

这就是我实现目标的方式：


import React from 'react';
import StandardFilterIntl, {StandardFilter} from 'bundles/components/Filter/StandardFilter';
import {mountWithIntl} from 'enzyme-react-intl';

const FilterComponent = mountWithIntl(<StandardFilterIntl {...standardFilterProps} />);
FilterComponent.find(StandardFilter).state()

用酶测试 react-intl 组件

Testing react-intl components with enzyme

unit-testing

reactjs

enzyme

react-intl