How to test functions inside functional component and also using hooks values

[MimoJSRepo]

Hello

I will try to explain the case in the simplest way that I could:

I have a component: Employee.tsx

It has a pseudo code like this:

const Employee = () => {

   const { name, status } = useEmployeeDetails();
    const { updateEmployeeInfo } = useEmployeeData(();
    const { clearStorage} = useCleanData();

    const generalUpdate = async() => {
          await updateEmployeeInfo(name, status);
           clearStorage();
    }

    return(
            <>
               <span>update</update>
               <button onClick={generalUpdate}></button>
           </>
           )

}

I am trying to write a test for 'generalUpdate' function that contains async function (updateEmployeeInfo) that is using hooks data as parameters, also I want to have a way how to access or spy on this function to be able to manipulate it and test different scenarios.

So :
1- How to access a function inside a functional component.
2- how to mock this function, especially if it is using another async function in its implementation?

Basically testing a function that is using data from hooks (or using async function inside it) and it exists inside a functional component

I hope my explanation is clear 😄

[imevanc]

@MimoJSRepo
Great question! Since generalUpdate is a function inside a functional React component, it isn't directly accessible from the test.

I'd mock the hook functions (useEmployeeDetails, useEmployeeData, useCleanData) since generalUpdate relies on them and trigger the function by simulating user interactions as a first solution.

This might help you!

jest.mock('path to useEmployeeDetails');
jest.mock('path to useEmployeeData');
jest.mock('path to useCleanData');

test('should call updateEmployeeInfo and clearStorage on button click', async () => {
    const mockUpdateEmployeeInfo = jest.fn().mockResolvedValue('success');
    const mockClearStorage = jest.fn();

    useEmployeeDetails.mockReturnValue({ name: 'JD', status: 'active' });
    useEmployeeData.mockReturnValue({ updateEmployeeInfo: mockUpdateEmployeeInfo });
    useCleanData.mockReturnValue({ clearStorage: mockClearStorage });

    render(<Employee />);

    const button = screen.getByRole('button');
    await userEvent.click(button);

    await waitFor(() => {
      expect(mockUpdateEmployeeInfo).toHaveBeenCalledWith('JD', 'active');
    });

    expect(mockClearStorage).toHaveBeenCalled();
  });