es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿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);
})
Tags:  , , , ,

Answer

  1. Avatar for 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:

    npm install --save-dev @vue/test-utils
    

    Luego, importa la función flushPromises() al principio de tu archivo de pruebas:

    import { flushPromises } from '@vue/test-utils'
    

    Finalmente, agrega await flushPromises() después de activar el evento de click en el botón removeBtn. 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:

    test('removes post after clicking remove button', async () => {
    
      // inicializando el wrapper aquí con props relevantes
    
      const postEditionIcon = findByTestAttr(wrapper, 'post-edition-icon').first();
      postEditionIcon.simulate('click');
      const removeBtn = findByTestAttr(wrapper, 'remove-btn');
      removeBtn.simulate('click'); // no es necesario esperar aquí
      await flushPromises(); // esperar a que las llamadas de Firebase terminen
    
      const post = findByTestAttr(wrapper, 'post-component');
      expect(post.exists()).toBe(false);
    })
    

    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.

Comments are closed.