reactjs 如何在Jest中更改MUI日期选择器的值(x日期选择器)

a5g8bdjr 于 2023-02-03 发布在 React

关注(0)|答案(1)|浏览(356)

关于{ DatePicker } from '@mui/x-date-pickers'：
我不知道如何使用Jest更改值。
下面是我的DatePicker- Package 器DatePickerX：

import React, { useState } from 'react';
import { DatePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import { de } from 'date-fns/locale';
import { TextField } from '@mui/material';

export const DatePickerX: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date());

  const changeDate = (newDate: Date | null) => {
    if (newDate) {
      setDate(newDate);
    }
  };

  return (
    <>
    <LocalizationProvider locale={de} dateAdapter={AdapterDateFns}>
        <DatePicker
          label="datepicker_label"
          value={date}
          inputFormat="yyyy/MM/dd"
          views={['year', 'month', 'day']}
          mask="____/__/__"
          onChange={changeDate}
          renderInput={(params) => (
            <TextField type="text"  {...params}  data-testid="textInput_testid" name="textInput_name"/>
          )}
        />
    </LocalizationProvider>
    </>

  );
}

这在UI上工作得非常好。
以下是我更改日期的尝试。所有测试均失败：

describe('change date picker value test 1', () => {
  test('use datepicker label; set string', async () => {
    render(<DatePickerX />);

    const input = screen.getByLabelText('datepicker_label');
    await act(async () => {
      await fireEvent.change(input, { target: { value: '3000/01/01' } });
    });

    expect(screen.getByText('3000/01/01')).toBeVisible();
  });
  test('use text input; set string', async () => {
    render(<DatePickerX />);

    const input2 = screen.getByTestId('textInput_testid');
    await act(async () => {
      await fireEvent.change(input2, { target: { value: '3000/01/01' } });
    });

    expect(screen.getByText('3000/01/01')).toBeVisible();
  });

  test('use datepicker label; set date', async () => {
    render(<DatePickerX />);

    const input = screen.getByLabelText('datepicker_label');
    await act(async () => {
      await fireEvent.change(input, { target: { value: new Date('3000/01/01') } });
    });

    expect(screen.getByText('3000/01/01')).toBeVisible();
  });

  test('use text input; set date', async () => {
    render(<DatePickerX />);

    const input2 = screen.getByTestId('textInput_testid');
    await act(async () => {
      await fireEvent.change(input2, { target: { value: new Date('3000/01/01') } });
    });

    expect(screen.getByText('3000/01/01')).toBeVisible();
  });
});

我哪里做错了？

reactjs

来源：https://stackoverflow.com/questions/75332019/how-to-change-the-value-of-an-mui-datepicker-in-jest-x-date-pickers

1条答案

按热度按时间

cbeh67ev1#

在呈现任何具有依赖项的组件之前，先加载这些依赖项非常重要。
因此，测试失败的一个问题可能是，当您在每种情况下呈现组件时，测试运行程序都在寻找提供程序、适配器和其他依赖项。
要解决此问题，您可以使用**jest.mock函数或仅导入它们**
这是文档链接包含的示例之一。

import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  // or you could use the following depending on your use case:
  // axios.get.mockImplementation(() => Promise.resolve(resp))

  return Users.all().then(data => expect(data).toEqual(users));
})

希望这能有所帮助

赞(0）回复(0）举报 2023-02-03

我来回答

reactjs 如何在Jest中更改MUI日期选择器的值(x日期选择器)

1条答案

相关问题

热门标签

最新问答