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

Question

我正在尝试使用酶和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: '[email protected]',
      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: () => {} });

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