Дата не обновляется в компоненте DatePicker после вызова метода onChange при тестировании - PullRequest
Новая
       21

Дата не обновляется в компоненте DatePicker после вызова метода onChange при тестировании

0 голосов
/ 14 января 2020

Я недавно начал писать юнит-тесты и столкнулся с проблемой. Итак, я использую пакеты react-datepicker и material-ui в своем маленьком проекте.

Вот мой DatePickerItem компонент ниже: 

import Grid from "@material-ui/core/Grid/Grid";
import DatePicker, { registerLocale } from "react-datepicker";
import React from "react";
import { subDays } from "date-fns";
import ru from "date-fns/locale/ru";

registerLocale("ru", ru);

type Props = {
  selectedDate: Date;
  setDate: (date: Date) => void;
};

const DEMO_LIFE_TIME = 7;

export const DatePickerItem: React.FC<Props> = ({ setDate, selectedDate }) => {
  const rangeStartDate = subDays(new Date(), DEMO_LIFE_TIME);
  const rangeEndDate = new Date();

  return (
    <Grid item xs={6}>
      <DatePicker
        locale="ru"
        selected={selectedDate}
        minDate={rangeStartDate}
        maxDate={rangeEndDate}
        showTimeSelect
        timeFormat="HH:mm"
        timeIntervals={1}
        dateFormat="dd.MM.yyyy HH:mm"
        onChange={(date: Date) => setDate(date)}
      />
    </Grid>
  );
};

Этот компонент используется, чтобы позволить пользователю выбрать дату. Я создал следующий тест для этого компонента: 

import React from "react";
import { shallow, ShallowWrapper } from "enzyme";
import { subDays } from "date-fns";
import Grid from "@material-ui/core/Grid/Grid";
import DatePicker from "react-datepicker";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import { DatePickerItem } from "../DatePickerItem";

configure({ adapter: new Adapter() });

const DEMO_LIFE_TIME = 7;

describe("Datepicker component", () => {
  let component: ShallowWrapper;

  const createComponent = (props = {}) => {
    const selectedDate = new Date();
    const setDate = jest.fn();

    return shallow(
      <DatePickerItem
        setDate={setDate}
        selectedDate={selectedDate}
        {...props}
      />
    );
  };

  afterEach(() => {
    component.unmount();
  });

  it("should render changed startDate", () => {
    const event = {
      target: {
        value: subDays(new Date(), DEMO_LIFE_TIME - 4)
      }
    };
    const setDateMock = jest.fn();
    component = createComponent({
      setDate: setDateMock
    });
    const gridContainer = component.find(Grid);
    const datePickers = gridContainer.find(DatePicker);

    const firstDatePicker = datePickers.at(0);

    firstDatePicker.simulate("change", event);

    expect(setDateMock).toBeCalledTimes(1);
    expect(firstDatePicker.props().minDate).toEqual(event.target.value);
  });
});

enter image description here Я ожидаю, что значение свойства minDate будет изменено после вызова метода onChange, но, к сожалению, мой Тест не работает правильно.

Я хотел бы выяснить причину, по которой мой тест не работает правильно. Заранее спасибо за любую помощь.

...