Promise.all causes Jest to display UnhandledPromiseRejectionWarning

Question

I have some code which calls Promise.all. It runs OK in the browser with no warnings in the console.

There are 3 functions f1, f2 & f3 all of which return a promise. The code looks like this

Promise.all([
  f1(),
  f2(),
  f3()
]).then((values) => {
  resolve({success: true})
}).catch(err => {
  reject(err)
})

When I use Jest to test the file containing the above code I see this error.

(node:17177) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 18)

Is this the wrong way to code the above or is it a bug within Jest?

Here's the actual code that I'm using:

getDataFromDatabase() {
  return new Promise((resolve, reject) => {
    const assessmentUrl = `${this.assessmentUrl}`
    http.get(assessmentUrl).then(response => {
      if (response.data.record === null) {
        Promise.all([
          this._getPupilPlacement(),
          this._getSurveyQuestions(),
          this._getCompetencies()
        ]).then((values) => {
          successState.pupilPlacement = values[0].pupilPlacement
          successState.items = values[1].items
          successState.formid = values[2].formid
          successState.competencies = values[3].competencies
          const panels = this.getPanels(values[3].competencies)
          successState.panels = panels
          successState.numPages = panels.length
          successState.itemsAreOverridden = true
          resolve(successState)
        }).catch(err => {
          reject(err)
        })

      }
      else {
        resolve(response.data.record)
      }
    })
  })
}

Your `resolve` and `reject` are callbacks from a promise. Does that promise have a `.catch()` ? — kemicofa ghost, Feb 22 '19 at 11:49
@kemicofa Yes - that code is called within a function which itself returns a promise hence the calls to resolve and reject. — Michael Garthwaite, Feb 22 '19 at 11:55
could you please also share the code of the test? It's most likely that you didn't `.catch()` rejection in your test case — Sebastian Kaczmarek, Feb 22 '19 at 12:40
Your `new Promise` can reject, so you should have a `.catch` wherever you call `getDataFromDatabase`. — trincot, Feb 22 '19 at 12:42
BTW: you are using the [promise constructor antipattern](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it) — trincot, Feb 22 '19 at 12:43
Btw, `values[3]` is undefined, as the `values` array will have only three elements. Not sure where those `items` are coming from, there seems to be no promise associated to them. — Bergi, Feb 22 '19 at 13:04
What is `successState`, where are you initialising it? You probably should create the object inside the `getDataFromDatabase` method — Bergi, Feb 22 '19 at 13:05

score 2 · Answer 1 · answered Feb 22 '19 at 12:58

Avoid the Promise constructor antipattern! You were forgetting to handle errors from the http.get(assessmentUrl) promise.

You should be writing

getDataFromDatabase() {
  const assessmentUrl = `${this.assessmentUrl}`
  return http.get(assessmentUrl).then(response => {
//^^^^^^
    if (response.data.record !== null)
      return response.data.record;
    return Promise.all([
//  ^^^^^^
      this._getPupilPlacement(),
      this._getSurveyQuestions(),
      this._getCompetencies()
    ]).then(values => {
      const panels = this.getPanels(values[3].competencies)
      return {
//    ^^^^^^
        pupilPlacement: values[0].pupilPlacement,
        items: values[1].items,
        formid: values[2].formid,
        competencies: values[3].competencies,
        panels: panels,
        numPages: panels.length,
        itemsAreOverridden: true,
      };
    });
  });
}

kemicofa ghost · Answer 2 · 2019-02-22T12:53:04.343

Explanation:

Calling reject will throw an error. If your top level promise doesn't catch it, then well it's an unhandled promise.

MDN Image src

Solution:

getDataFromDatabase().catch(err=>console.lor(err.message));

Example of a promise that rejects.:

function getDataFromDatabase(){
  return Promise.reject(123);
}

getDataFromDatabase()
.then(data=>console.log("Success " + data))
.catch(err=>console.log("Error " + err));

Promise MDN doc

Future recommendation:

For every child promise you seem to be adding a .catch() which isn't needed. As long as somewhere higher up there is a catch, then the promise will be handled.

Promise.all causes Jest to display UnhandledPromiseRejectionWarning

2 Answers2

Explanation:

Solution:

Example of a promise that rejects.:

Future recommendation: