用酶和笑话测试 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,
  });

而且我的验证和表单工作得很好。但是当我决定编写测试时，我发现酶总是失败并出现同样的错误，我不知道如何用酶

测试这样的components/forms

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 (/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 (/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本身里面有很多异步的方法和hook，所以在你的测试中也需要用异步的方式来写。说到一般的 testing hook，我建议您将 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)
  })

用酶和笑话测试 Formik 形式

Testing Formik form with enzyme and jest

reactjs

enzyme

formik