Formik Material UI和react测试库

npm install formik yup @material-ui/core

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { TextField, Button } from '@material-ui/core';

const validationSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <Field
          as={TextField}
          label="Name"
          name="name"
          error={touched.name && Boolean(errors.name)}
          helperText={touched.name && errors.name}
        />
        <Field
          as={TextField}
          label="Email"
          name="email"
          error={touched.email && Boolean(errors.email)}
          helperText={touched.email && errors.email}
        />
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </Form>
    )}
  </Formik>
);

export default MyForm;

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import MyForm from './MyForm';

test('submits the form', () => {
  const { getByLabelText, getByText } = render(<MyForm />);
  fireEvent.change(getByLabelText('Name'), { target: { value: 'John' } });
  fireEvent.change(getByLabelText('Email'), { target: { value: 'john@example.com' } });
  fireEvent.click(getByText('Submit'));
  // 这里可以添加断言来验证表单提交后的行为
});