javascript - 使用模拟数据提交表单验证测试

Question

我正在尝试使用 Enzyme 和 Jest 为我的 React 组件编写测试。我的 React 组件正在使用 Formik。

我的初始更改如下所示

const emptyChange = {
    start_of_maintenance: new Date(),
    expected_end_of_maintenance: new Date(),
  };

然后将其传递给 Formik，如下所示

const formik = useFormik({
    initialValues: changeValues,
    validationSchema: Yup.object({
      start_of_maintenance: Yup.date().min(new Date(), 'Start of Maintenance must be greater then todays date and time.'),
      expected_end_of_maintenance: Yup.date().required('Please set a end of maintenance date')
        .test('is-greater', 'Expected end of Maintenance cannot be before Start of Maintenance.', function (value) {
          return moment(value).isAfter(moment(new Date(this.parent['start_of_maintenance'])));
        }),
    }),

请注意，我使用 YUP 进行验证，它检查结束日期是否晚于开始日期，如果不是，则会设置错误。我的 start_of_maintenance 和 expected_end_of_maintenance 是使用 react-datepicker 的字段。看起来像这样

<DatePicker
            id="expected_end_of_maintenance"
            name="expected_end_of_maintenance"
            selected={
              props.formik.values.expected_end_of_maintenance || new Date(Date.now())
            }
            timeInputLabel="Time:"
            dateFormat="dd/MM/yyyy HH:mm"
            timeFormat="HH:mm"
            showTimeInput
            shouldCloseOnSelect={false}
            minDate={subDays(props.formik.values.start_of_maintenance, 0)}
            showYearDropdown
            todayButton="Today"
            onChange={(date) => props.formik.setFieldValue('expected_end_of_maintenance', date)}
          />

我的测试看起来像这样

test('testing submitting form with new change', async () => {
    advanceTo(new Date(2022, 2, 27, 0, 0, 0));

    const user = {
      id: '5dfcf74cae1b487b4f1c20fb',
      email: 'someusers@user.com',
      first_name: 'Someone',
      last_name: 'lastName',
      user_id: '4d02adb0-74c4-445f-9e0f-49752d70801d',
      created: '2019-12-20T16:31:08.734Z',
    };

    const pushMock = jest.fn();

    const formik = {
      values: {
        expected_end_of_maintenance: new Date('2024-01-30T15:09:40.367Z'),
      },
      setFieldValue: jest.fn(),
      touched: {},
    };

    const wrapper = mount(
      <UserContext.Provider value={user}>
        <ChangeForm isNew contactList={contactList} push={pushMock}>
          <ChangeFormInput formik={formik} />
        </ChangeForm>
      </UserContext.Provider>,
    );

    await act(async () => {
      const mockJsonPromise = Promise.resolve(existingChange);
      const mockFetchPromise = Promise.resolve({
        json: () => mockJsonPromise,
      });

      jest.spyOn(adalConf, 'adalApiFetch').mockImplementation(() => mockFetchPromise);

      setTimeout(() => {
        wrapper.update();
      }, 0);

      wrapper.find('form').simulate('submit', { preventDefault: () => {} });

      adalConf.adalApiFetch(fetch, '/change/single-save', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(existingChange),
      });

      expect(adalConf.adalApiFetch).toHaveBeenCalledTimes(1);
      expect(adalConf.adalApiFetch).toHaveBeenCalledWith(fetch, '/change/single-save', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(existingChange),
      });
    });

    // expect(pushMock.mock.calls.length).toBe(1);
    // expect(pushMock.mock.calls[0][0]).toEqual({ pathname: '/confirmation-change', state: { value: existingChange, changeId: 'werwe', contactList: [] } });
  });

我还使用 jest-date-mock 来模拟日期。但是我遇到的问题是预期结束日期始终与开始日期相同。发生的情况是我的验证返回 false，这阻止了表单的提交。我尝试了以下方法，但没有成功

const expectedEndOFMaintenance = wrapper.find("t[id='expected_end_of_maintenance']");
      expectedEndOFMaintenance.instance().value = '29/03/2022 11:00';
      expectedEndOFMaintenance.simulate('change');
      console.log(expectedEndOFMaintenance.instance().value);

也尝试过 expectedEndOFMaintenance.simulate('change', { target: { selected: new Date().toISOString() } }); 再次没有运气。不确定如何模拟或设置 expected_end_of_maintenance 的值，我们将不胜感激。

Answer 1

对于任何遇到此问题的人。我解决这个问题的方法是使用以下

const expectedEndOFMaintenance = wrapper.find('input[id="expected_end_of_maintenance"]');

expectedEndOFMaintenance.simulate('change', { target: { value: new Date('2026-03-29T11:00:00.000Z').toISOString() } });

await new Promise((resolve) => setImmediate(resolve));

setTimeout(() => {
   wrapper.update();
}, 0);

wrapper.find('form').simulate('submit', { preventDefault: () => {} });

我相信我在提交之前没有更新组件，因此该值从未改变。在组件上添加更新并等待修复此问题。