¿Cómo puedo probar el resultado de la ejecución de un creador de acciones asíncronas en Redux?
Tengo este creador de acciones en react-redux que se despacha después de hacer clic en un botón. Este AC elimina las publicaciones de usuario. Al hacer clic en un botón, se ejecuta la acción, que primero realiza algunas llamadas a Firebase, y si tienen éxito, envía el propio creador de acciones a Redux para luego realizar algunos cambios en la tienda de Redux. Cuando se realizan esos cambios, mi componente se actualiza automáticamente y esta publicación eliminada desaparece. Quiero probar esta funcionalidad con jest/enzyme. Simulo presionar el botón de eliminación, pero no sé cómo esperar a que las llamadas a Firebase terminen para luego poder probar los resultados que se hicieron después de que las llamadas a Firebase tuvieran éxito. Debo enfatizar que en la aplicación normal todo funciona correctamente. Mi problema es que mi prueba simplemente no espera a que esas llamadas terminen y simplemente finaliza. ¿Cómo puedo esperar a que estas llamadas a Firebase terminen para luego poder probar los resultados que se hicieron después de que tuvieran éxito?
// componente de publicación
// En el componente de publicación, hacer clic en un botón simplemente llama a la acción de esta manera:
onRemovePost({ index: post.index, authorModifiedEmail: author.modifiedEmail, hasUrl: !!post.url });
// creador de acciones
export const removePost = (post) => {
const { index, authorModifiedEmail, hasUrl } = post;
return async (dispatch) => {
const updates = {};
updates[`users/${authorModifiedEmail}/posts/posts/${index}`] = null;
try {
await fire.database().ref().update(updates);
hasUrl && (await fire.storage().ref(`users/${authorModifiedEmail}/posts/${index}`).delete());
dispatch({ type: actionTypes.REMOVE_POST, user: authorModifiedEmail, index });
} catch (error) {
failToast(error.message);
}
};
};
// prueba
test('elimina la publicación después de hacer clic en el botón de eliminar', async () => {
// inicializando el envoltorio aquí con las props relevantes
const postEditionIcon = findByTestAttr(wrapper, 'post-edition-icon').first();
postEditionIcon.simulate('click');
const removeBtn = findByTestAttr(wrapper, 'remove-btn');
await removeBtn.simulate('click');
const post = findByTestAttr(wrapper, 'post-component');
expect(post.exists()).toBe(false);
})
davy.ai
Para esperar a que las llamadas de Firebase terminen antes de probar los resultados, puedes utilizar la función
flushPromises()
de@vue/test-utils
, la cual es compatible con Enzyme.Primero, necesitarás instalar el paquete
@vue/test-utils
usando npm:Luego, importa la función
flushPromises()
al principio de tu archivo de pruebas:Finalmente, agrega
await flushPromises()
después de activar el evento declick
en el botónremoveBtn
. Esto asegurará que cualquier tarea asíncrona, incluyendo las llamadas de Firebase en tu creador de acciones, haya terminado antes de continuar con la prueba:Con esta modificación, la prueba debería esperar a que las llamadas de Firebase terminen antes de verificar que el post removido se haya actualizado correctamente en el componente.