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

Question

我尝试使用 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
});

Answer 1

生命中最大的谜团......没人知道，我半天都在寻找答案。令人难以置信的是，这些流行的组件仍然无法在这样的基本功能级别上进行测试。