用酶和玩笑测试 Formik 形式

Question

我有表单组件（这是简化的示例。实际上我有更多字段）：

    <form className="film-form" onSubmit={formik.handleSubmit}>
        <LabeledInput
          id="film-title"
          name="title"
          title="Title"
          value={formik.values.title}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={getErrorMessageForField('title')}
        />
          <Button
            title="save"
            onClick={formik.handleSubmit}
            className="film-form__actions__submit"
          />
    </form>

我用useFormik钩子

  const formik = useFormik({
    initialValues: initialState,
    validationSchema: Yup.object({
      title: Yup.string().required('Title is required field'),
    }),
    onSubmit: onSave,
  });

我的验证和表单完美运行。 但是当我决定编写测试时，我发现酶总是失败并出现同样的错误，我不知道如何用酶测试这些成分/形式

describe('FilmForm', () => {
  test('when all fields are empty then errors is displayed', async () => {
    const onSubmit = jest.fn();
    const onClose = jest.fn();
    const form = mount(
      <FilmForm
        title="Add film"
        onSubmit={onSubmit}
        onClose={onClose}
        defaultGenres={[{ label: 'All', value: 'all' }]}
      />,
    );

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

    expect(form.html()).toMatchSnapshot();
  });
});

结果我在输出中看到这样的错误

console.error
    Warning: An update to FilmForm inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):

第二个

 console.warn
    Warning: An unhandled error was caught from submitForm() TypeError: Cannot read property 'body' of null
        at getActiveElement (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6651:16)
        at getActiveElementDeep (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6939:17)
        at getSelectionInformation (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:6972:21)
        at prepareForCommit (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:7463:26)
        at commitRootImpl (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:22474:5)
        at unstable_runWithPriority (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at commitRoot (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:22381:3)
        at finishSyncRender (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21807:3)
        at performSyncWorkOnRoot (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21793:7)
        at /home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11089:24
        at unstable_runWithPriority (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:653:12)
        at runWithPriority$1 (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11039:10)
        at flushSyncCallbackQueueImpl (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11084:7)
        at flushSyncCallbackQueue (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:11072:3)
        at scheduleUpdateOnFiber (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:21199:9)
        at dispatch (/home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/react-dom/cjs/react-dom.development.js:15660:5)
        at /home/alesha/Documents/Projects/react-js-training/react-js-training/node_modules/formik/src/Formik.tsx:357:11
        at processTicksAndRejections (internal/process/task_queues.js:93:5)

      at node_modules/formik/src/Formik.tsx:836:17

任何人都可以请帮助或分享一些文章 提前致谢

Answer 1

Formik 本身有很多异步方法和钩子，所以在你的测试中你也需要用异步的方式编写。 说到测试钩子，我建议你将react-testing-library与enzyme和jest一起使用。你可以看这里：https://testing-library.com/docs/react-testing-library/intro

有关如何将其专门用于Formik 的更多详细信息。我建议您阅读this article，这是一个很好的解释。 （或者可以 google 'test formik with react-testing library'）

简而言之，您需要在库的 wait 方法中覆盖它。像这样的：

  await wait(() => {
    fireEvent.change(color, {
      target: {
        value: "green"
      }
    })
  })

  await wait(() => {
    fireEvent.click(submit)
  })