reactjs - React Intl 找不到所需的“intl”对象。需要存在于组件祖先中

Question

我使用了最新版本的 React-intl(^5.20.2)。试图在 React 钩子组件中实现酶单元测试。但抛出此错误“[React Intl] 找不到所需intl的对象。需要存在于组件祖先中。” 在运行测试时在功能组件内使用 UseIntl()

{intl.formatMessage({ id: "Welcome" })}

Answer 1

您需要用组件包装被测IntlProvider组件。您可以通过创建一个包装器来传递render实用程序的选项来做到这一点。

包装器

传递一个 React 组件作为wrapper选项，让它围绕内部元素呈现。这对于为通用数据提供者创建可重用的自定义渲染函数非常有用。

例子：

import { IntlProvider } from 'react-intl';

export const IntlWrapper = ({ children }) => (
  <IntlProvider locale="en">{children}</IntlProvider>
);

测试代码

import { render } from '@testing-library/react';
import { IntlWrapper } from '../path/to/testUtils';

...

render(
  <ComponentUnderTest />,
  {
    wrapper: IntlWrapper,
  },
);