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

Question

我正在尝试使用 React 测试库更改 Material UI Datepicker 输入的值。但它似乎不适用于

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"

任何建议表示赞赏:)

Answer 1

我也遇到了类似的问题，是这样解决的：

const datepicker = screen.getByLabelText('To date')
userEvent.type(datepicker, '2021-11-09'); // type anything 
const chosenDate = screen.getByRole('button', { name: "Oct 30, 2019"}); // choose any date that the calender shows
fireEvent.click(chosenDate);
expect(chosenDate).toBeInTheDocument();

Answer 2

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");
  });
});

Answer 3

上面的答案对我有用，但做了一些修改。

 const dayOfVisit = container.getByRole('textbox', { name: 'Choose date, selected date is Sep 7, 2021' })
 fireEvent.click(dayOfVisit);
 const dayInput = container.getByRole('button', { name: 'Sep 9, 2021'});
 fireEvent.click(dayInput);
 expect(dayInput).toBeInTheDocument();

Answer 4

Datepicker 组件将呈现 MobileDatePicker 或 DesktopDatePicker（更多信息此处）。目前测试默认渲染MobileDatePicker。如果您想提供键盘输入，那么您需要模拟 DatePicker 并将其替换为 DesktopDatePicker。

jest.mock('package', async () => {
    const actual = jest.requireActual('package')
    return {
        ...actual,
        DatePicker: actual.KeyboardDatePicker
    }
})