如何Mock Material UI <DateTimePicker>用于测试？renderInput参数解析

我正在为测试创建Material UI <DateTimePicker>的Mock组件，用来测试日期验证逻辑，检查是否传入无效日期。想请教如何Mock renderInput()方法，它期望接收哪些params参数？

我的Mock组件代码如下：

interface MockCalendar {
    onChange: (date: string | Date) => void
}

const Calendar: FC<MockCalendar> = ({ onChange, renderInput }) => (
    <div>
        <input data-testid="calendarField" onChange={(event) => onChange(new Date(event.target.value))} />
        //what params should I pass and what should it look like?
        {renderInput && renderInput()}
    </div>
);

以下是我要Mock的MUI组件实现：

<DesktopDatePicker
    data-name="specialPriceActiveFrom"
    label={t('dateFrom', { ns: 'product' })}
    inputFormat={t('dateFormat', { ns: 'common' })}
    value={formik.values.specialPriceActiveFrom || null}
    onChange={(date) => {
        formik.setFieldTouched('specialPriceActiveFrom');
        formik.setFieldValue('specialPriceActiveFrom', date);
    }}
    renderInput={(params) => (
        <TextField
            {...params}
            data-testid="specialPriceActiveFrom"
            name="specialPriceActiveFrom"
            fullWidth
            onBlur={formik.handleBlur}
            error={
                formik.touched.specialPriceActiveFrom &&
                Boolean(formik.errors.specialPriceActiveFrom)
            }
            helperText={
                formik.touched.specialPriceActiveFrom &&
                formik.errors.specialPriceActiveFrom
            }
        />
    )}
/>

1. renderInput 核心参数说明 #

Material UI的日期选择器组件传给renderInput的params，是适配TextField的核心props，主要包含这些字段：

• value: 输入框显示的文本值（对应日期选择器的value转成的字符串）
• onChange: 输入框文本变更时的回调（用于同步输入内容到日期选择器）
• error: 布尔值，标记输入是否存在验证错误
• helperText: 错误或提示文本
• inputRef: 输入框的DOM引用
• label: 输入框的标签文本
• disabled: 是否禁用输入框

2. 修改后的Mock组件代码 #

需要先完善接口定义，再传递正确的参数给renderInput，保证和原组件的行为一致：

import { FC } from 'react';

interface MockCalendarProps {
    onChange: (date: Date | null) => void;
    value: Date | null;
    renderInput: (params: {
        value: string;
        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
        error?: boolean;
        helperText?: string;
        inputRef?: React.Ref<HTMLInputElement>;
        label?: string;
    }) => React.ReactNode;
    error?: boolean;
    helperText?: string;
    label?: string;
}

const MockCalendar: FC<MockCalendarProps> = ({ 
    onChange, 
    value, 
    renderInput, 
    error = false, 
    helperText = '',
    label = ''
}) => {
    // 将Date类型转为输入框可识别的文本格式
    const inputValue = value ? value.toISOString().split('T')[0] : '';

    // 处理输入框文本变更，转成Date后调用组件的onChange
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const inputDate = e.target.value ? new Date(e.target.value) : null;
        onChange(inputDate);
    };

    return (
        <div>
            {renderInput({
                value: inputValue,
                onChange: handleInputChange,
                error,
                helperText,
                label
            })}
        </div>
    );
};

3. 测试使用示例 #

在测试中可以直接复用原组件的renderInput逻辑，通过控制error和helperText验证日期验证逻辑：

// 测试渲染代码
render(
    <MockCalendar
        value={testDate}
        onChange={(date) => {/* 处理日期变更逻辑 */}}
        error={true}
        helperText="无效的日期格式"
        renderInput={(params) => (
            <TextField
                {...params}
                data-testid="specialPriceActiveFrom"
                fullWidth
            />
        )}
    />
);

// 断言错误提示是否正确显示
expect(screen.getByText('无效的日期格式')).toBeInTheDocument();

内容的提问来源于stack exchange，提问作者tdimoff