Question

我最近开始编写单元测试，但遇到了一个问题。因此，在我的小项目中使用了<body> <h1>Hello there!</h1> <form id='form' method="POST" action="/api"> <input id='textField' type='text' name='name' placeholder='Enter your name'> <p>Enter your date of birth:</p> <div class='dob'> <input id='date' type='number' name='date' placeholder='Date'> <select id='dobMonth' name="month"> <option value="default">Month</option> <option value="Jan">January</option> <option value="Feb">February</option> <option value="Mar">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="Aug">August</option> <option value="Sept">Septmeber</option> <option value="Oct">October</option> <option value="Nov">November</option> <option value="Dec">December</option> </select> <input id='year' type='number' name='year' placeholder='Year'> </div> <input id='btn' type='submit'> </form> <script src='script.js'></script> </body>和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); }); });方法之后，minDate属性的值将被更改，但是很遗憾，我的测试无法正常工作。

我想找出我的测试无法正常工作的原因。预先感谢您的帮助。

测试时调用onChange方法后，DatePicker组件中的日期未更新

0 个答案: