[英]React Testing Library: Unable to Change Material UI DatePicker Input Value
I'm trying to change the value of the Material UI Datepicker Input with React Testing Library.我正在尝试使用 React 测试库更改 Material UI Datepicker Input 的值。 But it doesn't seem to work with
fireEvent.change()
.但它似乎不适用于
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");
});
Here is what jest reports:以下是开玩笑的报道:
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"
Any suggestions are appreciated :)任何建议表示赞赏:)
I had a similar problem and solved it this way:我有一个类似的问题并以这种方式解决:
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();
DatePicker
by default will open the calendar view and will not allow you to provide keyboard inputs . DatePicker
默认会打开日历视图并且不允许您提供键盘输入。 You need to use the KeyboardDatePicker
instead .您需要改用
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");
});
});
The above answer worked for me, with a little modification though.上面的答案对我有用,但稍作修改。
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.