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

问题描述 投票:0回答:4

我正在尝试使用 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"

任何建议表示赞赏:)

javascript reactjs datepicker material-ui react-testing-library
4个回答
5
投票

我也遇到了类似的问题,是这样解决的:

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();

3
投票

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

1
投票

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

 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();

0
投票

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

jest.mock('package', async () => {
    const actual = jest.requireActual('package')
    return {
        ...actual,
        DatePicker: actual.KeyboardDatePicker
    }
})
© www.soinside.com 2019 - 2024. All rights reserved.