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.

  • es.davy.ai/
  • Programación /
  • Probar Vue con Jest da un error TypeError: no se puede leer la propiedad ‘then’ de indefinido.

Probar Vue con Jest da un error TypeError: no se puede leer la propiedad ‘then’ de indefinido.

05 Aug, 2023 Programación

He estado intentando ejecutar una prueba en un archivo, pero aún no estoy probando la función y sigo obteniendo un error “TypeError: no se puede leer la propiedad ‘then’ de undefined”. Las líneas en el archivo vue se ven así:

this.$store.dispatch($c.ACTION_FETCHDATA, payloadTradingAccounts).then((response) => {
    if (response) {
        self.$store.commit(`accounts/${$c.MUTATE_SETACCOUNTS}`, response);
        self.isLoading = false;
    }
});

y en las actions, tengo lo siguiente:

[$c.ACTION_FETCHDATA]({state, commit, rootState}, payload) {
    return new Promise((resolve, reject) => {
        let instance = axios.create({
            baseURL: $c.DEFAULT_API_URL,
            timeout: $c.DEFAULT_TIMEOUT,
            headers: {
                'X-Session-Token': rootState.accessToken
            }
        });
        instance.get(payload.url, {
            params: payload.params
        }).then((response) => {
            let rows = response.data.data;
            resolve(rows);
        }).catch((err) => {
            onError(err, commit);
            console.log(err);
        });
    });
},
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error TypeError: No se puede leer la propiedad 'then' de indefinido suele ocurrir cuando la función llamada en el bloque then() no devuelve una promesa o devuelve un valor indefinido.

    En este caso, el error ocurre porque la función $store.dispatch no devuelve una promesa. Para solucionar esto, puedes modificar la acción $c.ACTION_FETCHDATA para que devuelva la promesa instance.get():

    [$c.ACTION_FETCHDATA]({state, commit, rootState}, payload) {
  let instance = axios.create({
    baseURL: $c.DEFAULT_API_URL,
    timeout: $c.DEFAULT_TIMEOUT,
    headers: {
      'X-Session-Token': rootState.accessToken
    }
  });
  return instance.get(payload.url, {
    params: payload.params
  }).then((response) => {
    let rows = response.data.data;
    commit(`accounts/${$c.MUTATE_SETACCOUNTS}`, rows);
    return rows;
  }).catch((err) => {
    onError(err, commit);
    console.log(err);
    // volver a lanzar el error para que se propague al llamador
    throw err;
  });
},

    De esta manera, la función $store.dispatch devolverá una promesa que se puede encadenar con el bloque then() en el archivo Vue.

    this.$store.dispatch($c.ACTION_FETCHDATA, payloadTradingAccounts)
  .then((response) => {
    if (response) {
      self.$store.commit(`accounts/${$c.MUTATE_SETACCOUNTS}`, response);
      self.isLoading = false;
    }
  })
  .catch((err) => {
    console.error(err);
    self.isLoading = false;
  });

Comments are closed.