Reactjs 如何使用@testing library/react测试ant设计日期选择器？

我在一个组件中有两个ant设计。我正在尝试更改和测试日期选择器的值，但无法在测试环境dom中找到日历输入

日期选择器组件

import { DatePicker, Form } from "antd";
import React, { Component } from "react";

import moment from "moment";

class DatePickers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment().subtract(1, "month"),
      startDateError: "",
      endDate: moment(),
      endDateError: "",
    };
  }

  onStartDateChange = (date) => {
    this.setState({
      startDate: date,
      startDateError: date ? "" : "Please select start date",
    });
  };

  onEndDateChange = (date) => {
    this.setState({
      endDate: date,
      endDateError: date ? "" : "Please select end date",
    });
  };

  render() {
    const { endDate, endDateError, startDate, startDateError } = this.state;

    return (
      <React.Fragment>
        <Form.Item
          validateStatus={startDateError ? "error" : ""}
          help={startDateError}
          htmlFor="startDate"
          label="Date From"
        >
          <DatePicker
            id="startDate"
            placeholder="Select Start Date"
            allowClear={false}
            onChange={this.onStartDateChange}
            defaultPickerValue={startDate}
            defaultValue={startDate}
            format="DD-MM-YYYY"
          />
        </Form.Item>
        <Form.Item
          validateStatus={endDateError ? "error" : ""}
          help={endDateError}
          htmlFor="endDate"
          label="To"
        >
          <DatePicker
            id="endDate"
            placeholder="Select End Date"
            allowClear={false}
            onChange={this.onEndDateChange}
            defaultPickerValue={endDate}
            defaultValue={endDate}
            format="DD-MM-YYYY"
          />
        </Form.Item>
      </React.Fragment>
    );
  }
}


export default DatePickers;

版本：

"react" : "16.10.1",
"antd": "3.25.1",
"@testing-library/jest-dom": "5.7.0",
"@testing-library/react": "10.0.4",
"@testing-library/user-event": "10.1.2"

---

是否有任何解决方案可以断言此错误？

此错误似乎与日期选择器测试问题无关：

无论如何，这就是我用RTL测试Ant设计日期选择器的方法：

组件

<Form.Item colon={false} label={t('searchFields.creationDate.label')} name="creationDateRange">
  <RangePicker data-testid="creationDate" />
</Form.Item>

[...]
rtl = render(...);
[...]

// grab the input
const creationDateFromInput = rtl.getByTestId('creationDate').querySelectorAll('input')[0];
// mouseDown opens the calendar popup, set focus on the input
fireEvent.mouseDown(creationDateFromInput);
// type date in input
fireEvent.change(creationDateFromInput, { target: { value: '2020-01-15' } });
// now calendar popup is opened and 2020-01-15 cell is selected, just click on it
fireEvent.click(document.querySelector('.ant-picker-cell-selected'));

// now form field is correclty set

我试图让它更具可读性，并避免使用document.querySelector部分，我不太喜欢它，但我找不到其他解决方案。这当然可以改进

---

祝你好运

我在antd v4上遇到了完全相同的问题。上述解决方案是apt及其工作原理。我在Form.Item中使用多个日期选择器时遇到了一些问题，如果我们对日期选择器进行了自定义验证，请确保正确设置了日期格式

    const startDate = screen.getByTestId("start-date");
    fireEvent.mouseDown(startDate);
    fireEvent.change(startDate, { target: { value: "10-12-2020" } });
    fireEvent.click(document.querySelectorAll(".ant-picker-cell-selected")[0]);

设置日期时，确保值的格式正确（根据您的验证），如果不使用矩，还确保所有日期字符串都设置为您正在使用的库。我在使用dayjs，有一个瞬间对象弄乱了其中一个日期。我花了好几个小时才弄明白。希望能有帮助

    const endDate = screen.getByTestId("end-date");
    fireEvent.mouseDown(endDate);
    fireEvent.change(endDate, { target: { value: "10-25-2020" } });
    fireEvent.click(document.querySelectorAll(".ant-picker-cell-selected")[1]);

---

我试图将您的解决方案与DatePicker集成，但没有成功。另外，我没有选择

。ant picker cell selected

，而是尝试查找

。ant calendar selected date

。我知道您使用的是antd 3，我使用的是antd 4，因此您可能确实需要调整选择器。对于我来说，无论出于何种原因，使用

fireEvent.mouseDown（）

和

fireEvent.change（）

都很重要。我一直试图使用

userEvent.click（）

和

userEvent.type（）

，但都没有用。也许这对某人有帮助。

    const startDate = screen.getByTestId("start-date");
    fireEvent.mouseDown(startDate);
    fireEvent.change(startDate, { target: { value: "10-12-2020" } });
    fireEvent.click(document.querySelectorAll(".ant-picker-cell-selected")[0]);

    const endDate = screen.getByTestId("end-date");
    fireEvent.mouseDown(endDate);
    fireEvent.change(endDate, { target: { value: "10-25-2020" } });
    fireEvent.click(document.querySelectorAll(".ant-picker-cell-selected")[1]);