Mocking a promise rejection in Jest to ensure that the calling function properly handles rejections

How can I effectively test the get function in Jest, specifically by mocking Promise rejection in localForage.getItem to test the catch block?

async get<T>(key: string): Promise<T | null> {
  if (!key) {
    return Promise.reject(new Error('There is no key to get!'));
  }

  try {
    return await this.localForage.getItem(key);
  } catch (err) {
    throw new Error('The key (' + key + ") isn't accessible.");
  }
}

I attempted the following:

  test('test get promise rejection', async () => {
    const expectedError = new Error(
      'The key (' + 'fghgdfghfghfdh' + ") isn't accessible."
    );
    jest.fn(localforage.getItem).mockRejectedValue(new Error());
    expect(get('fghgdfghfghfdh')).rejects.toThrow(expectedError);
  });

However, an error occurs:

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

[UnhandledPromiseRejection: 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(). The promise rejected with the reason "Error: expect(received).rejects.toThrow()

Received promise resolved instead of rejected
Resolved to value: null".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Answer №1

Alright, let's modify the code by removing the await keyword from this line

expect(await get('fghgdfghfghfdh')).rejects.toThrow(expectedError);

This change is necessary because the error message specifically indicates that

received value must be a promise or a function returning a promise

As a result, the test fails when it anticipates rejection but instead receives a resolved value of null

To address this issue, you have two options:

 expect(get()).rejects.toThrow(expectedError);

Alternatively, you can enhance the get function by making it more defensive like this

async get<T>(key: string): Promise<T | null> {
  if (!key) {
    return Promise.reject(new Error('There is no key to get!'));
  }

  try {
    const result = await this.localForage.getItem(key);
    if (result) return result;
    throw new Error('empty value');
  } catch (err) {
    throw new Error('The key (' + key + ") isn't accessible: ");
  }
}

So, which approach should you choose? You might consider both... regardless, I hope you succeed in resolving your tests!

Answer №2

After some troubleshooting, I managed to get it up and running by replacing localforage.getItem with jest.fn().mockRejectedValue:

test('test get promise rejection', async () => {
  localforage.getItem = jest.fn().mockRejectedValue(new Error());

  const expectedError = new Error(
    'The key (' + 'fghgdfghfghfdh' + ") isn't accessible."
  );
  expect(handler.get('fghgdfghfghfdh')).rejects.toThrow(expectedError);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting the Bootstrap modal form to submit when using Knockout's submit binding?

Check out my jsFiddle example by clicking here. I am currently working on a form within a bootstrap modal. The problem I'm facing is that the knockout submit binding doesn't get executed unless the user clicks on the submit input. It seems like ...

Do developers only need type definitions for npm packages on their local machines?

It is my understanding that type definition modules for npm packages offer developers intellisense, eliminating the need to guess parameter types when using library methods. These modules have proven to be extremely valuable in my typescript project, esp ...

Creating a custom route in Node.js using Express for posting content and adding it to a specific user's page

I am currently working on a node.js express project where I am developing a health app for a trainer to manage his clients. The main functionality of the app includes allowing the trainer to access individual client profiles and view their exercise list by ...

Convert a string with the characters '"' retrieved from a MySQL database into JSON

After creating a JSON object and storing it in MySQL, I encountered an issue when trying to retrieve and parse it. When I stringify the JSON object, the properties are being enclosed in double quotes causing issues when parsing the retrieved string. Below ...

The operation of 'val' is not supported by HTMLInputElement

While working with a table row, I am iterating through each cell. Inside every cell lies a text box containing some value that I need to store in an array. function dothing() { var tds = $('#'+selected+' td'); var submi ...

Establish a variable in XSL to define the tabIndex

My XSL code has been designed to read an XML file and generate input elements of type text for each child node. The XML file structure is as follows: For node c, two input boxes are created in the format: Label(com 1) :input box--------------------- Label ...

Hiding validation messages upon clicking in a textbox in ASP.NET MVC: a tutorial

When attempting to hide the validation message on click of the textbox, it remains visible. Can someone please provide assistance? <div class="col-md-10"> @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @autoco ...

Tips for adapting my custom input component for compatibility with vee-validate?

I recently developed an input component for my Vue project and integrated it within my forms. My aim is to implement vee-validate for validating the inputs. Initially, I attempted to validate my component like any regular input field. However, upon encoun ...

What is the best way to stop an embedded mp4 video from playing when a dynamically generated button is clicked?

After making modifications to the QuickQuiz code found at https://github.com/UrbanInstitute/quick-quiz, I have replaced the img with an embedded mp4 video that loads from a JSON file. Additionally, I switched from using the original SweetAlert library to S ...

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

Exploring the functionality of the Angular snackbar feature

I have created a simple snackbar with the following code: app.component.ts: ngOnInit(){ this.dataService.valueChanges.pipe( filter((data) => data === true), switchMap(() => { const snackBarRef = this.matSnackBar.open ...

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

What is the method to retrieve the ID name of an HTML tag based on its value?

Is there a way to determine the ID of an HTML tag based on its content? For example, if I have the following textboxes: I need to identify the id with the value "A2" So the expected result is id=option2 because its value is A2 <input type="text ...

A guide on implementing getStaticProps using TypeScript in Next.js

Why am I consistently receiving undefined results when attempting to retrieve all posts from my backend? What could be causing this issue? import { AppContext } from '@/helpers/Helpers' import axios from 'axios' import { GetStaticProps} ...

Tips for making a Scroll Button

I am in the process of designing a horizontal website and I would like to incorporate two buttons, one on the left and one on the right, that allow users to scroll to the left and right, respectively. You can check out the site I am currently working on h ...

Exploring VueJS Router History Mode with NGinx web server

After conducting research, I discovered several issues similar to the one I am facing. Currently, I have a docker-compose setup on Digital Ocean with NGinx, VueJS, and a Static Landing Page. Everything was working fine until I added a new route with a fo ...

Issue with extended waiting times in polling

I am currently working on a chatroom using the long poll method. However, I'm facing an issue where every time a long poll occurs and I refresh the page in Chrome or try to send another async request, everything times out. This means I can't load ...

Problem with Selenium WebDriver: Some HTML elements are not being displayed

I am currently working on a python web scraper. Here is the code I have written: from selenium.webdriver.chrome.options import Options from selenium import webdriver from bs4 import BeautifulSoup chrome_options = Options() chrome_options.add_argument(&qu ...

Is there a way for ASP.NET MVC to automatically notify when a record is edited or updated?

Having recently used the NotifyIcon class in a windows application, I found it to be quite useful. As someone who primarily works as a web developer, I am curious if there is something similar available for websites. The website that I am working on inclu ...

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Encountering an issue where manipulating/process response and return triggers an error in TypeScript with the message "Not all code paths return a value.". Data is fetched from a backend API using RxJS lastValueFrom operator, along with lodash functions as ...