title: How to test ant design date picker using @testing-library/react?
body: <p>I have two ant design <a href="https://3x.ant.design/components/date-picker/" rel="noreferrer">date pickers</a> in a component. I am trying to change and test the value of date picker but not able to find the calendar input in the test environment dom.</p>
  
  <p>Date Pickers Component</p>
  
  <pre><code>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) =&gt; {
      this.setState({
        startDate: date,
        startDateError: date ? "" : "Please select start date",
      });
    };
  
    onEndDateChange = (date) =&gt; {
      this.setState({
        endDate: date,
        endDateError: date ? "" : "Please select end date",
      });
    };
  
    render() {
      const { endDate, endDateError, startDate, startDateError } = this.state;
  
      return (
        &lt;React.Fragment&gt;
          &lt;Form.Item
            validateStatus={startDateError ? "error" : ""}
            help={startDateError}
            htmlFor="startDate"
            label="Date From"
          &gt;
            &lt;DatePicker
              id="startDate"
              placeholder="Select Start Date"
              allowClear={false}
              onChange={this.onStartDateChange}
              defaultPickerValue={startDate}
              defaultValue={startDate}
              format="DD-MM-YYYY"
            /&gt;
          &lt;/Form.Item&gt;
          &lt;Form.Item
            validateStatus={endDateError ? "error" : ""}
            help={endDateError}
            htmlFor="endDate"
            label="To"
          &gt;
            &lt;DatePicker
              id="endDate"
              placeholder="Select End Date"
              allowClear={false}
              onChange={this.onEndDateChange}
              defaultPickerValue={endDate}
              defaultValue={endDate}
              format="DD-MM-YYYY"
            /&gt;
          &lt;/Form.Item&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  
  export default DatePickers;
  </code></pre>
  
  <p>Test case using @testing-library/react</p>
  
  <pre><code>import { render, screen, waitFor } from "@testing-library/react";
  import userEvent from "@testing-library/user-event";
  
  test("date input value validation", async () =&gt; {
    const { container } = render(&lt;DatePickers /&gt;);
  
    const startDateNode = screen.getByPlaceholderText(/select start date/i);
    const endDateNode = screen.getByPlaceholderText(/select end date/i);
  
    userEvent.click(startDateNode);
  
    const calendarInput = container.querySelector("ant-calendar-input");
    await userEvent.type(calendarInput, "");
  
    // assert
    expect(screen.getByText("Please select by start date")).toBeInTheDocument();
  });
  </code></pre>
  
  <p>The test case fails and throws an error</p>
  
  <pre><code>console.error node_modules/jest-environment-jsdom-fourteen/node_modules/jsdom/lib/jsdom/virtual-console.js:29
        Error: Not implemented: navigation (except hash changes)
  </code></pre>
  
  <p>Versions:</p>
  
  <pre><code>"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"
  </code></pre>
  
  <p>Is there any solution to assert this?</p>