使用Jest测试react-native-ui-datepicker时出现类型错误如何解决？

我在使用react-native-ui-datepicker库的DateTimePicker组件时，用Jest编写测试用例出现以下错误：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `SingleDatePicker`.
    at onChange (/Users/**/DateTimePicker/SingleDatePicker.tsx:9:3)

18 |       testID="single-date-picker"
19 |     >
> 20 |       <DateTimePicker
     |       ^
21 |         mode={'single'}
22 |         date={date}
23 |         onChange={onChange}

at printWarning (node_modules/react/cjs/react-jsx-runtime.development.js:87:30)
at error (node_modules/react/cjs/react-jsx-runtime.development.js:61:7)

我的测试用例代码如下：

import React from 'react';
import dayjs from 'dayjs';
import { render } from '@testing-library/react-native';
import DatePicker from './DatePicker';
import { screen } from '@testing-library/react-native';

jest.mock('react-native-ui-datepicker', () => ({
  default: jest.fn(),
}));

const mockOnChange = jest.fn();

describe('Testing DatePicker', () => {
  const date = dayjs().format();
  it('Testing DatePicker', () => {
    render(
      <DatePicker type="single" date={date} onChange={mockOnChange} />
    );
    expect(screen.queryByTestId('single-date-picker')).toBeTruthy();
  });
});

请问如何解决这个错误？

错误原因是你在jest.mock中把react-native-ui-datepicker的默认导出设为jest.fn()，但React渲染组件要求传入的是可渲染的函数/类组件，而非普通函数对象。

方法1：模拟可渲染的占位组件 #

将mock改为返回一个能正常渲染的函数组件，React Native环境下用View作为容器：

import { View } from 'react-native';

jest.mock('react-native-ui-datepicker', () => ({
  default: (props) => <View testID="mock-date-picker" {...props} />,
}));

方法2：适配命名导入场景 #

如果你的业务组件中是通过命名导入DateTimePicker（如下）：

import { DateTimePicker } from 'react-native-ui-datepicker';

则需要修改mock，对应导出DateTimePicker命名组件：

import { View } from 'react-native';

jest.mock('react-native-ui-datepicker', () => ({
  DateTimePicker: (props) => <View testID="mock-date-picker" {...props} />,
}));

验证修改效果 #

重新运行测试，错误即可消失。还可以添加断言验证mock组件是否正常渲染：

expect(screen.queryByTestId('mock-date-picker')).toBeTruthy();

内容的提问来源于stack exchange，提问作者Kavin Raju S