Modified3 years ago. I wrote a unit test for some Axios calls in my component. I verified the success path, where the call resolves successfully, but I am not able to verify the failure path, where the call rejects.
How do I use mocks to verify this? Here's a snippet of my FetchImage.vue component:. And my test for when the call rejects (for an invalid URL):. 6161 bronze badges. Your catch block isn't running because the mock return value is using Promise.resolve() when it actually should be Promise.reject():.
- 1414 gold badges143143 silver badges200200 bronze badges. 200200 bronze badges. Use this interceptor:. I was looking at my error reports on Honeybadgertoday, and I came across this:. If you are like me, you are looking at that thinking… Okay, but what wentwrong?
As far as Honeybadger is concerned, the error is that we did not handle apromise rejection. The real issue, though, is thataxios rejected because of a failed request.Unfortunately, we can’t tell what the failure was, because it is masked behindthis unhandledrejection error.
- I went looking for a solution, and I came acrossthis Github issue, which got me onthe right track. svpace mentioned that they were using thisinterceptor:.
- but it was not working as they expected. They were still encountering anunhandledrejection error. I tried using that interceptor, and saw the exact same result they did, whichmakes sense.
If you look at the interceptor, we are handling the rejection. In thathandler, we log the error message, then move on. Unfortunately, though, the nextthing the interceptor does is return another rejection.
- That rejection puts usright back where we started, with an unhandled rejection. Your axios requests should look like one of the following:. My error handler looks like this:. Also, I use the try/catch version of the code above.
Based on this, you can see that my axios.get call is failing, and e in thecatch block is an unhandledrejection error, rather than the error axiosencountered.
- That error is then reported to Honeybadger. As I mentioned, the Github issue put me on the right track. We definitely wantto use an interceptor, as that is the only way I am aware of to handle therejection. What should our interceptor look like though? First, we want to pass successful resolutions along, so we start with this:.
Next, we need to add a rejection handler:. What should we do in this handler? Let’s think about our goals:. Get rid of the unhandledrejection error.
Surface the actual error to our Promise.catch call, or the catch blockif you are using try/catch. The way to do this is to re-throw the original error, rather than reject again.To do that, we can update the interceptor to look like this:.
- I hope you enjoyed this article, have a great day! Modified2 years, 10 months ago. Having trouble dealing with a specific case of an error, seems like my understanding of promises is flawed.Central error handling in axios interceptor, handles all my calls to the api and most of my errors, it looks like this:.
This works well for most cases but in one case, where I make this api call:. The 409 error which I am trying to catch does not reach the component, my code in the component looks like this:.
- It seems as though my Interceptor returns a promise and not an object therefore I cannot handle it. Ideally I wouldn't need to resolve the promise in the components rather it would just receive the error message.
What is the recommended way to pass to my component the actual error so I can properly handle it?