在单元测试中安装时 FormattedTime 组件抛出错误

Question

我正在为使用 react-intl 组件 FormattedTime 的自定义 React 挂钩实施单元测试。不幸的是，我在安装时遇到以下错误：

[Error: FormattedTime(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

使用 FormattedTime 的挂钩部分：

{ timeIncrements.map((time, key) => (
  <DropdownItem value={ format(convertTime(time, date), "yyyy-MM-dd'T'HH:mm:'00'") } key={ key }>
    <FormattedTime
      value={ convertTime(time, date) }
      timeZone={ timezone }
      timeZoneName='short'
      hour='numeric'
      minute='numeric'
      hour12={ true }
    />
  </DropdownItem>
)) }

我已确认 convertTime 函数正在返回一个要传递给组件的值。

单元测试还没有太多内容，但这里是：

it('mounts component', () => {
  const Component = injectIntl(Settings);
  const wrapper = mount(<Component />);

  expect(wrapper.find(Schedule)).toHaveLength(1);

  wrapper.unmount();
});

有没有办法 spyOn/mock 那个 FormattedTime 组件？ 我已经为 FormattedMessage 错误做了类似的 spyOn，但是不能似乎找到了一种实现类似 FormattedTime 的方法。我认为这对某人来说是一个简单的问题，但它让我感到不适，所以寻求帮助。

根据@diedu 的回答更新...这是wrapper.debug() 的输出：

<IntlProvider locale="en-US" messages={{...}} formats={{...}} timeZone={[undefined]} textComponent={[symbol]} defaultLocale="en" defaultFormats={{...}} onError={[Function: mockConstructor] { _isMockFunction: true, getMockImplementation: [Function (anonymous)], mock: Object [Object: null prototype] { calls: [], instances: [], invocationCallOrder: [], results: [] }, mockClear: [Function (anonymous)], mockReset: [Function (anonymous)], mockRestore: [Function (anonymous)], mockReturnValueOnce: [Function (anonymous)], mockResolvedValueOnce: [Function (anonymous)], mockRejectedValueOnce: [Function (anonymous)], mockReturnValue: [Function (anonymous)], mockResolvedValue: [Function (anonymous)], mockRejectedValue: [Function (anonymous)], mockImplementationOnce: [Function (anonymous)], mockImplementation: [Function (anonymous)], mockReturnThis: [Function (anonymous)], mockName: [Function (anonymous)], getMockName: [Function (anonymous)] }} />

Answer 1

react-intl 需要 I18n 上下文才能工作，您需要使用安装时所需的所有提供者第 3 方库来包装您正在测试的组件。

  it("mounts component", () => {
    const Component = injectIntl(Settings);
    const wrapper = mount(
      <IntlProvider locale={usersLocale} messages={translationsForUsersLocale}>
        <Component />
      </IntlProvider>
    );

    expect(wrapper.find(Schedule)).toHaveLength(1);

    wrapper.unmount();
  });

在单元测试中安装时 FormattedTime 组件抛出错误

FormattedTime component throwing error when mounted in unit test

reactjs

jestjs

react-hooks

react-intl