reactjsjestjsreact-hook-formreact-testing

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?


Solution

  • 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();
      });
    });