Estoy tratando de cambiar el valor de la entrada del selector de fechas de la interfaz de usuario del material con la biblioteca de pruebas React. Pero no parece funcionar con 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"); });Esto es lo que informa broma:
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"Cualquier sugerencia es apreciada :)
Tuve un problema similar y lo resolví de esta manera:
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 de forma predeterminada abrirá la vista de calendario y no le permitirá proporcionar entradas de teclado. Debe usar KeyboardDatePicker en su lugar.
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"); }); });La respuesta anterior funcionó para mí, aunque con una pequeña modificación.
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();