英文:
How to test useFormContext(react-hook-form) using jest
问题
以下是您要求的翻译部分:
I have a CDOB component and a DOB component that are using Mds form elements and react-hook-form's useFormContext
. I want to write a test case for the useFormContext
methods such as watch.
Here is the code for the components:
export default function CDOB(props) {
const { addr } = props;
const { watch } = useFormContext();
const code = watch(addr);
const getMsg = () => {
if (code === 'AL') {
return 'Invalid state';
} else {
return 'Invalid entry';
}
}
return (
<DOB keys={{ age: getMsg() }} />
);
}
Code for DOB component:
export default function DOB(props) {
const { age } = props;
const { watch, setValue } = useFormContext();
const code = watch(addr);
const getMsg = () => {
if (code === 'AL') {
return 'Invalid state';
} else {
return 'Invalid entry';
}
}
return (
<MdsTextInput
onChange={props.onChange}
// ...
/>
);
}
How can I test useFormContext
's watch method using Jest?
英文:
I have a CDOB component and a DOB component that are using Mds form elements and react-hook-form's useFormContext
.
I want to write a test case for the useFormContext
methods such as watch.
Here is the code for the components:
export default function CDOB(props){
const { addr } = props;
const { watch } = useFormContext();
const code = watch(addr) ;
const getMsg =() => {
if(code == 'AL'){ return 'Invalid state'}
else {return 'Invalid entry'}
}
return( <DOB keys={age: getMsg()}/>)
}
Code for DOB component:
export default function DOB(props){
const { age } = props;
const { watch, setValue } = useFormContext();
const code = watch(addr) ;
const getMsg =() => {
if(code == 'AL'){ return 'Invalid state'}
else {return 'Invalid entry'}
}
return ( <MdsTextInput
onChange={props.onChange}
....
/>
)
}
How can I test useFormContext
’s watch method using Jest?
答案1
得分: 0
你可以以与测试任何其他表单相同的方式进行测试,从用户的角度来看,而不必担心将实现细节放入组件中。
你需要使用react-testing-library和jest来执行这些操作,因为仅使用jest无法挂载组件。然后模拟用户操作,如点击/输入/提交,并检查你的错误消息 "Invalid state" 和 "Invalid entry" 是否放置在正确的位置。
英文:
You can test in the same way you would test any other form, from the user's point of view without worrying about the implementation details into the component.
You will need to use react-testing-library with jest to do that jest alone can not mount the component. And simulate user actions like click/type/submit and check if your error messages "Invalid state" and "Invalid entry" are in the right place.
答案2
得分: 0
EN-USA: You need to mock a "useFormContext"
PT-BR: Você precisa mockar um "useFormContext"
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import CDOB from './CDOB';
jest.mock('react-hook-form', () => ({
useFormContext: jest.fn().mockReturnValue({
watch: jest.fn(),
}),
}));
describe('CDOB', () => {
it('should display the correct message based on the code', () => {
const mockWatch = jest.fn().mockReturnValue('AL');
const mockUseFormContext = jest.requireMock('react-hook-form').useFormContext;
mockUseFormContext.mockReturnValue({
watch: mockWatch,
});
render(<CDOB addr="example" />);
expect(screen.getByText('Invalid state')).toBeInTheDocument();
});
it('should display the default message for invalid codes', () => {
const mockWatch = jest.fn().mockReturnValue('XX');
const mockUseFormContext = jest.requireMock('react-hook-form').useFormContext;
mockUseFormContext.mockReturnValue({
watch: mockWatch,
});
render(<CDOB addr="example" />);
expect(screen.getByText('Invalid entry')).toBeInTheDocument();
});
});
英文:
EN-USA: You need to mock a "useFormContext"
PT-BR: Você precisa mock a "useFormContext"
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import CDOB from './CDOB';
jest.mock('react-hook-form', () => ({
useFormContext: jest.fn().mockReturnValue({
watch: jest.fn(),
}),
}));
describe('CDOB', () => {
it('should display the correct message based on the code', () => {
const mockWatch = jest.fn().mockReturnValue('AL');
const mockUseFormContext = jest.requireMock('react-hook-form').useFormContext;
mockUseFormContext.mockReturnValue({
watch: mockWatch,
});
render(<CDOB addr="example" />);
expect(screen.getByText('Invalid state')).toBeInTheDocument();
});
it('should display the default message for invalid codes', () => {
const mockWatch = jest.fn().mockReturnValue('XX');
const mockUseFormContext = jest.requireMock('react-hook-form').useFormContext;
mockUseFormContext.mockReturnValue({
watch: mockWatch,
});
render(<CDOB addr="example" />);
expect(screen.getByText('Invalid entry')).toBeInTheDocument();
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论