Tips for simulating an axios request that returns an image buffer

I am attempting to simulate an axios api call that returns an image buffer as shown below:

<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e1 00 de 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 06 00 12 01 03 00 01 00 00 00 01 00 ... 12688 more bytes>

The fetch function is implemented separately.

const axios = require('axios');
const logger = require('./logger');

const imageApi = axios.create({
  baseURL: 'https://endpoint',
  timeout: 5000,
});

const fetchRandomImage = async ({ imageId, width, height }) => {

  try {
    // Fetch image
    const response = await imageApi.get(`/id/${imageId}/${width}/${height}`, {
      responseType: 'arraybuffer',
    });
    return response.data;
  } catch (error) {
    return null;
  }
};

module.exports = fetchRandomImage;

What is the right approach for testing this using jest with mock?

Answer №1

One way I like to mock a promise method is:

jest.mock("./path-to-fetchRandomImage", () => jest.fn(() => Promise.resolve('customize-your-response')));

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

Create a new column in Material UI Grid by adding an empty div element instead of using padding

I'm currently getting acquainted with Material UI Grid and I am interested in adding an empty column (a blank space on the right of the first element) without utilizing padding. How can this be achieved? Here's a snippet of the code being discus ...

The PHP script is not being activated by AJAX

I am completely baffled by the situation at hand. Sometimes, I open a different browser to test my changes and it works as expected. But then, when I try again, it fails. It's driving me crazy. On syllableapp.com, I set up a MySQL database that I can ...

`Inability to remove item from array in Vue.js`

I've been struggling to understand why this feature isn't functioning as expected. I'm using sample code for reference, but it's not behaving the same way. When I click on the delete button, nothing happens even though it should remove ...

The v-for loop is looking for a numerical value, but it received something that is Not

The v-for directive is having trouble accessing the nStars prop in order to run a loop. I am attempting to display multiple stars by using the component <display-stars>. However, the component does not seem to be receiving the nStars prop for the loo ...

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

What could be causing the returned promise value to not refresh?

I am currently facing an issue with my program. Upon clicking a button, the goal is to update the "likes" attribute of a MongoDB document that has been randomly fetched. Despite setting up the logic for this, the update does not occur as intended: MongoCli ...

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

Ways to change a value into int8, int16, int32, uint8, uint16, or uint32

In TypeScript, the number variable is floating point by default. However, there are situations where it's necessary to restrict the variable to a specific size or type similar to other programming languages. For instance, types like int8, int16, int32 ...

`I am unable to insert an image into PrimeReact`

I am struggling to integrate images into the dashboard using primereact. Despite placing my photo folder in the public directory and entering the correct photo path, the image is not displaying on the page. I have attempted numerous methods but have been ...

Tips for transitioning from Angular to Angular 2: Overcoming key challenges

Our current Angular project is highly developed, but with the emergence of Angular 2 and its advanced features and improved performance, we are considering migrating our existing work. However, we are concerned about the potential challenges that may ari ...

The JSON format in ASP.Net Core MVC does not have designated data fields

I am currently facing an issue with my JavaScript code related to cascading dropdowns. The setup involves having one dropdown for selecting a car brand and another dropdown for choosing a specific model under that brand. The functionality should work in su ...

Using jQuery to trigger several setTimeout() functions in succession

I'm struggling to grasp the concept of jQuery promises. To delve into this topic, I have put together the following code snippet inspired by a discussion on StackOverflow. let functions = [ function () { setTimeout(function () { console.log("func ...

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

The state is not being configured accurately

In my ReactJs project, I have a model Component with a picture that is displayed. I want to pass the data of the clicked picture, which can be neither raw data nor a URL. I have implemented a handler that can delete the picture (if pressed with the Ctrl k ...

Is it possible to embed a Microsoft Teams meeting within an Iframe?

Is it possible for MS Teams to provide a URL of a video meeting that can be embedded in external locations, such as an iframe on my website? I attempted to add it like this: <iframe src="https://teams.microsoft.com/l/meetup-join/19%3ameeting_N2E3M ...

Increase or decrease values in an input field using Vue3 when typing

I am looking to implement a feature where users can input numbers that will be subtracted from a fixed total of 100. However, if the user deletes the input, I want the difference to be added back to the total of 100. Despite my attempts, the subtraction wo ...

It is not possible to invoke a function within the AJAX success method

When trying to display an error message in my notify (toast) div using jQuery in Ajax success, I am encountering difficulties. Despite decoding the response from the URL properly, only .show() and .hide() functions seem to work. Although I have used conso ...

"Looking to disable the browser shortcut for ctrl-N and instead trigger a function when this key combination is pressed? Check out the JS Fiddle example provided below

I recently incorporated the library shortcut.js from In my project, I attempted to execute a function when CTRL + N is pressed. The function executed as expected; however, since CTRL + N is a browser shortcut for opening a new window in Mozilla 8, it also ...

Retrieve a Play Scala variable in the $scope of an AngularJS application

After trying various methods recommended on StackOverflow, I am still struggling to retrieve a Play Scala variable within my Javascript $scope. The line of initialization in an HTML file is as follows: @(playVariable: String)(implicit request: play.api.mv ...

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?

I need help customizing my Forms Date Input to only allow selection of Thursdays, Fridays, and Saturdays. I've searched for a solution but haven't been successful so far. Is there any JavaScript or HTML code that can help me achieve this? Below ...