如何测试DatePickerIOS？iOS原生日期选择器如何滚动至视野外指定日期？

Hey there！咱们一步步来解决你关于DatePickerIOS（以及iOS原生日期选择器）的两个问题：

测试这个组件主要分单元测试和端到端测试两种场景，具体看你用的技术栈：

单元测试（React Native 场景） #

如果是在React Native项目里用DatePickerIOS，推荐用@testing-library/react-native来写单元测试。因为DatePickerIOS是原生封装组件，我们核心要验证它的交互回调是否正常触发：

import { render, fireEvent } from '@testing-library/react-native';
import YourDatePicker from '../components/YourDatePicker';

test('日期选择后触发回调并传递正确日期', () => {
  const mockOnDateChange = jest.fn();
  const { getByTestId } = render(
    <YourDatePicker onDateChange={mockOnDateChange} />
  );

  // 模拟选择一个特定日期
  const targetDate = new Date('2024-06-15');
  fireEvent.change(getByTestId('custom-date-picker'), targetDate);

  // 断言回调被正确调用，且传入了目标日期
  expect(mockOnDateChange).toHaveBeenCalledWith(targetDate);
});

记得给你的DatePickerIOS组件加上testID属性，方便测试时定位元素。

端到端测试（模拟真实用户操作） #

如果要测试真实设备上的滚动、选择行为，推荐用Detox（React Native）或者XCTest（原生iOS）：

Detox 示例（React Native） #

Detox可以直接调用原生API设置日期，不需要手动模拟滚动：

await element(by.id('custom-date-picker')).setDate(new Date('2024-06-15'));

XCTest 示例（原生iOS） #

如果是原生iOS项目的UI测试，你可以定位到日期选择器的滚轮，逐个调整到目标值：

let app = XCUIApplication()
app.launch()

let datePicker = app.datePickers["YourDatePickerIdentifier"]
// 针对年、月、日三个滚轮分别设置值（根据你的选择器模式调整）
datePicker.pickerWheels.element(boundBy: 0).adjust(toPickerValue: "2024")
datePicker.pickerWheels.element(boundBy: 1).adjust(toPickerValue: "June")
datePicker.pickerWheels.element(boundBy: 2).adjust(toPickerValue: "15")

这个问题分开发场景和测试场景两种情况：

开发场景（直接跳转到目标日期） #

不管目标日期是不是在初始视野内，你都可以直接设置日期选择器的date属性，控件会自动滚动到对应位置，完全不需要手动处理滚动逻辑：

React Native 中： #

import DatePickerIOS from '@react-native-community/datetimepicker';
import { useState } from 'react';

const DatePickerDemo = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  // 点击按钮跳转到视野外的目标日期
  const jumpToTargetDate = () => {
    const targetDate = new Date('2024-12-31');
    setSelectedDate(targetDate);
  };

  return (
    <>
      <DatePickerIOS
        date={selectedDate}
        onDateChange={setSelectedDate}
        testID="custom-date-picker"
      />
      <button onPress={jumpToTargetDate}>跳转到2024年底</button>
    </>
  );
};

原生iOS 中： #

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var datePicker: UIDatePicker!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 初始显示当前日期
        datePicker.date = Date()
        
        // 跳转到视野外的目标日期
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd"
        if let targetDate = dateFormatter.date(from: "2024-12-31") {
            datePicker.date = targetDate
        }
    }
}

测试场景（模拟用户手动滚动） #

如果是在UI测试中需要模拟用户滚动到视野外的日期，用XCTest的adjust(toPickerValue:)方法就可以，它会自动滚动到目标值所在的位置，即使初始不在视野内：

let datePicker = app.datePickers["YourDatePickerIdentifier"]
// 滚动到2024年12月31日
datePicker.pickerWheels.element(boundBy: 0).adjust(toPickerValue: "2024")
datePicker.pickerWheels.element(boundBy: 1).adjust(toPickerValue: "December")
datePicker.pickerWheels.element(boundBy: 2).adjust(toPickerValue: "31")

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