I am getting an error when running my code coverage tests using React Testing Library. I believe I am getting the error because my tests are unmounting before the state update is triggered in my component.
const {
personSuccessAlert,
setPersonSuccessAlert,
updatePersonSuccessAlert,
setUpdatePersonSuccessAlert,
} = useContext(PeopleContext);
useEffect(() => {
setTimeout(() => {
setPersonSuccessAlert(false);
setUpdatePersonSuccessAlert(false);
}, 3000);
}, [peopleData, updatePersonSuccessAlert]);
My useEffect has a 3 second timeout before calling two functions will will update the state in context.
import React, { createContext, useState } from 'react';
export const PeopleContext = createContext();
const PeopleContextProvider = ({
children,
initialPersonSuccessAlert = false,
initialEditSuccessAlert = false,
}) => {
const [personSuccessAlert, setPersonSuccessAlert] = useState(
initialPersonSuccessAlert,
);
const [updatePersonSuccessAlert, setUpdatePersonSuccessAlert] = useState(
initialEditSuccessAlert,
);
return (
<PeopleContext.Provider
value={{
personSuccessAlert,
updatePersonSuccessAlert,
setPersonSuccessAlert,
setUpdatePersonSuccessAlert,
}}>
{children}
</PeopleContext.Provider>
);
};
export default PeopleContextProvider;
I am trying to figure out how to either mock the two functions or keep my test mounted long enough for the state update.
Here is what I am trying
test('onClick of person name to route to person record view loading for person record', async () => {
const history = createMemoryHistory();
history.push('/people');
const providerProps = { personSuccessAlert: true };
const { getByText } = render(
<MockedProvider mocks={getPeople} addTypename={false}>
<PeopleContextProvider {...providerProps}>
<Router history={history}>
<Switch>
<Route exact path="/people" component={People} />
<Route path="/people/:id" component={PersonRecord} />
</Switch>
</Router>
</PeopleContextProvider>
</MockedProvider>,
);
expect(getByText('Loading')).toBeInTheDocument();
await act(async () => new Promise((resolve) => setTimeout(resolve, 3500)));
});
I have tried setting const setPersonSuccessAlert = jest.fn(); but haven't found success with that.
Any ideas how to keep my component mounted?