如何使用 @react-testing-library 测试 @mui/x-date-pickers

sch*_*ldi 5 datepicker reactjs material-ui react-testing-library

我尝试使用 DatePicker 组件为我的表单编写测试。我在最新版本 6.2.0 中使用@mui/x-date-pickers。

当我运行下面的测试时,我收到消息:

“TestingLibraryElementError:无法找到文本为:15 的标签”

问题是,如何在测试表中选择特定日期。

任何帮助表示赞赏。

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


import {DatePicker} from '@mui/x-date-pickers/DatePicker'; // version 6.2.0
import {  LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';


test("renders DatePicker", async () => {
    const handleChange = jest.fn();
    const { getByLabelText } = render(
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
                label="Select a date"
                value={null}
                onChange={handleChange}

            />
        </LocalizationProvider>
    );

    const input = getByLabelText('Select a date');
    fireEvent.focus(input); // Open the DatePicker popover
    fireEvent.click(screen.getByLabelText('15')); // Click on a day in the DatePicker
    expect(handleChange).toHaveBeenCalledWith(new Date(2023, 3, 15)); // Verify that the onChange handler was called with the selected date
});


Run Code Online (Sandbox Code Playgroud)