javascript - React 测试库：无法更改 Material UI DatePicker 输入值

Question

我正在尝试使用 React 测试库更改 Material UI Datepicker Input 的值。但它似乎不适用于fireEvent.change().

import React from "react";
import { render, screen, waitFor, fireEvent } from "@testing-library/react";

import MomentUtils from "@date-io/moment";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";

describe("DatePicker", () => {
    test("Change datepicker value", async () => {
        render(
            <MuiPickersUtilsProvider utils={MomentUtils}>
                <DatePicker
                    label="Start Date"
                    id="startDate"
                    onChange={(date) => {
                        return undefined;
                    }}
                    value={new Date()}
                    format={"yyyy/MM/DD"}
                />
            </MuiPickersUtilsProvider>
        );

        const startDateInput = (await screen.findByLabelText("Start Date")) as HTMLInputElement;
        screen.debug(startDateInput);
        fireEvent.change(startDateInput, { target: { value: "2021/01/01" } });
        expect(startDateInput.value).toBe("2021/01/01");
    });

以下是开玩笑的报道：

console.log
    <input
      aria-invalid="false"
      class="MuiInputBase-input MuiInput-input"
      id="startDate"
      readonly=""
      type="text"
      value="2021/08/01"
    />

expect(received).toBe(expected) // Object.is equality

    Expected: "2021/01/01"
    Received: "2021/08/27"

任何建议表示赞赏:)

标签： javascriptreactjsdatepickermaterial-uireact-testing-library

Answer 1

DatePicker默认情况下会打开日历视图并且不允许您提供键盘输入。您需要使用KeyboardDatePicker.

import React, { useState } from "react";
import { render, screen, fireEvent } from "@testing-library/react";

import DateFnsUtils from "@date-io/date-fns";
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

const DatePickerExample = () => {
  const [date, setDate] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        clearable
        label="Start Date"
        id="startDate"
        onChange={(date) => {
          setDate(date);
        }}
        value={date}
        format={"yyyy/MM/dd"}
      />
    </MuiPickersUtilsProvider>
  );
};

describe("DatePicker", () => {
  test("Change datepicker value", () => {
    render(<DatePickerExample />);

    const startDateInput = screen.getByLabelText("Start Date");
    fireEvent.change(startDateInput, { target: { value: "2021/01/01" } });
    expect(startDateInput.value).toBe("2021/01/01");
  });
});