使用react-test-renderer测试Formik验证函数

Question

我正在尝试使用react-test-renderer通过onChange和onBlur测试我的validate函数。

下面是一个简化的测试：

import renderer, { act } from 'react-test-renderer';

const byTypeAndName = (type, name) => elem =>
  elem.type === type && elem.props.name === name;

const onSubmit = jest.fn();
const onValidate = jest.fn();
const instance = renderer.create(
  <Formik
    onSubmit={onSubmit}
    initialValues={{
      password: '',
      password2: '',
    }}
    validate={onValidate}
  >
    <Form>
      <Field
        type="password"
        name="password"
        autoComplete="new-password"
        required
      />
      <ErrorMessage name="password" />
    </Form>
  </Formik>
).root;

await act(async () => {
  const password = instance.find(byTypeAndName('input', 'password'));
  password.props.onChange('123');
});

expect(onValidate).toBeCalled(); // fails

Answer 1

事实证明，onChange和onBlur需要作为其currentTarget传入的元素的name。

这可以正常工作：

await act(async () => {
  const password = instance.find(byTypeAndName('input', 'password'));
  password.props.onChange({
    currentTarget: {
      // `name` is required else Formik doesn't run validation
      name: 'password',
      value: '123',
    },
  });
});