在React原生中使用Jest测试Formik的过程如下:
npm install --save-dev jest react-test-renderer
Formik.test.js
(或者你喜欢的其他名称),并在文件中导入所需的依赖:import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Formik, Form, Field } from 'formik';
import { act } from 'react-dom/test-utils';
render
函数来渲染Formik组件,并使用fireEvent
函数来模拟用户操作。以下是一个示例测试用例:test('Formik renders correctly', () => {
const onSubmit = jest.fn();
const initialValues = { name: '' };
const { getByLabelText, getByText } = render(
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<Field name="name" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
const nameInput = getByLabelText('Name');
const submitButton = getByText('Submit');
act(() => {
fireEvent.change(nameInput, { target: { value: 'John' } });
fireEvent.click(submitButton);
});
expect(onSubmit).toHaveBeenCalledWith({ name: 'John' });
});
在上述示例中,我们创建了一个简单的表单,包含一个文本输入框和一个提交按钮。我们使用getByLabelText
和getByText
函数来获取相应的元素,然后使用fireEvent
函数模拟用户输入和点击操作。最后,我们使用expect
断言来验证onSubmit
函数是否被调用,并传递了正确的表单值。
npx jest Formik.test.js
Jest将会执行测试并输出结果。
领取专属 10元无门槛券
手把手带您无忧上云