I want to have different unit tests to test the different states of my component and it's interaction with an async request. I am having alot of difficulty doing so. Most documentation says to "simulate" the event that triggers the async state change (i.e. simulate a click of a component), however, my state is supposed to change on component load and not by any user interaction. I have seen reference to the act function (https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#testing-hooks) but I don't know how to implement it in this context.

Here is my functional react component:

import { useRequest } from '@umijs/hooks' // Request custom hook // An async function that does an async task to get data async function someAsyncFunctionToFetch() => { return Promise.resolve({data: 'data'}) } // The functional component export function TestComponent() { const { data, error, loading } = useRequest(FulfillmentService.getFullfillmentServices) const loadingMarkup = ( <p>Loading</p> ) const errorMarkup = ( <p>Error</p> ) const contentMarkup = ( <p>{ data }</p> ) if (loading) { return loadingMarkup } else if (error) { return errorMarkup } else if (!isEmpty(data)) { return contentMarkup } else { return <p>Some empty state</p> } }

These are the tests that I want to achieve: