Question

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

[[ "${VAR:${#VAR}-1:1}" =~ [0-9] ]] && echo yes

我使用<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(...):

任何人都可以帮助或分享一些文章吗预先感谢

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)
  })

用酵素和开玩笑测试Formik形式

1 个答案: