Recibo un error cuando ejecuto mis pruebas de cobertura de código usando React Testing Library. Creo que recibo el error porque mis pruebas se están desmontando antes de que se active la actualización de estado en mi componente.

 const { personSuccessAlert, setPersonSuccessAlert, updatePersonSuccessAlert, setUpdatePersonSuccessAlert, } = useContext(PeopleContext); useEffect(() => { setTimeout(() => { setPersonSuccessAlert(false); setUpdatePersonSuccessAlert(false); }, 3000); }, [peopleData, updatePersonSuccessAlert]);

Mi useEffect tiene un tiempo de espera de 3 segundos antes de llamar a dos funciones que actualizarán el estado en contexto.

 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;

Estoy tratando de descubrir cómo simular las dos funciones o mantener mi prueba montada el tiempo suficiente para la actualización del estado.

Esto es lo que estoy tratando

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

He intentado configurar const setPersonSuccessAlert = jest.fn(); pero no he encontrado el éxito con eso.

¿Alguna idea de cómo mantener mi componente montado?