Repository navigation
How to test functions inside functional component and also using hooks values #1382
Description
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 😄
Activity
imevanc commentedon Mar 9, 2025
@MimoJSRepo
Great question! Since
generalUpdateis 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!