The error message you are encountering is: "Error: Unable to find function axios

Can't figure out why I'm encountering this error message:

TypeError: axios.get is not functioning properly

    4 |
    5 | export const getTotalPayout = async (userId: string) => {
  > 6 |   const response = await axios.get(`${endpoint}get-total-payout`, { params: userId });
    7 |   return response.data;
    8 | };
    9 |

This is my service:

import * as axios from 'axios';

const endpoint = '/api/pool/';

export const getTotalPayout = async (userId: string) => {
  const response = await axios.get(`${endpoint}get-total-payout`, { params: userId });
  return response.data;
};

This is my jest test:

// import mockAxios from 'axios';
import { getTotalPayout } from './LiquidityPool';

const userId = 'foo';

describe('Pool API', () => {
  it('getTotalPayout is called and returns the total_payout for the user', async () => {
    // mockAxios.get.mockImplementationOnce(() => {
    //   Promise.resolve({
    //     data: {
    //       total_payout: 100.21,
    //     },
    //   });
    // });

    const response = await getTotalPayout(userId);
    console.log('response', response);
  });
});

The content of src/__mocks__/axios.js looks like this:

// tslint:disable-next-line:no-empty
const mockNoop = () => new Promise(() => {});

export default {
  get: jest.fn(() => Promise.resolve({ data: { total_payout: 100.21 }})),
  default: mockNoop,
  post: mockNoop,
  put: mockNoop,
  delete: mockNoop,
  patch: mockNoop
};

Answer №1

If you're looking for more information, check out this resource: MDN

According to the information provided there, you will need a variable to capture the default export and then use another variable for the remaining exports, labeled as X. One way to achieve this is by using the following syntax:

import axios, * as others from 'axios';

In this case, the variable others represents X.

Instead of writing:

import * as axios from 'axios';

It can be assumed that ... from 'axios' in this context is related to your jest mock setup.

Answer №2

When importing Axios, always use

import Axios from "axios";
rather than
import { Axios } from "axios";

Answer №3

If you have import * as axios from 'axios';, it means that axios is not a default export. However, your mock seems to assume otherwise:

export default {
  get: jest.fn(() => Promise.resolve({ data: { total_payout: 100.21 }})),
  default: mockNoop,
  post: mockNoop,
  put: mockNoop,
  delete: mockNoop,
  patch: mockNoop
};

Solution

To fix this issue, remove the default export and adjust your mock structure to match the export structure of axios according to how you are importing it.

Answer №4

In order to use axios in your code, make sure to import it as shown below:

import axios, * as other from 'axios';

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

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

Even after refreshing the page, Chrome stubbornly insists on showing the old data

I've been working on a single-page application where one page triggers server requests every time it loads. After making changes and deploying them, I noticed that the live version of the application was not reflecting the updates. Even though the cha ...

"Beginner's guide to utilizing JQuery and AJAX with PHP

I am struggling to grasp the concept of using AJAX and jQuery to post data without reloading the page. Specifically, I am facing issues with the form reloading the page and not updating variables. Here is the code I have been working on: Initially, I was ...

Tips for setting variable values in Angular 7

I'm encountering an issue with assigning values to variables in my code. Can anyone provide assistance in finding a solution? Here is the snippet of my code: app.component.ts: public power:any; public ice:any; public cake:any; changeValue(prop, ...

A guide to accessing items imported from a glb file within the Babylon JS game engine

When I use the BABYLON.SceneLoader.ImportMesh() method to load a .glb file created in Blender, one of the objects is named Cube.003. Surprisingly, after calling the method, Cube.003 is not included in the scene.meshes array. It does show up in the scene ...

Close button for colorbox modal window containing an iframe

I'm currently utilizing colorbox for a modal popup, and the content of the popup is being sourced from a URL. Since it's displayed within an iFrame, I'm wondering how I can incorporate a close button to the modal popup. Thank you The follo ...

AngularJS: Utilizing UI Bootstrap Popover with the Placement Set to 'bottom-right'

I am working with UI Bootstrap and AngularJS, attempting to customize a popover to have the 'bottom-right' placement instead of the default 'bottom' or 'right'. The desired functionality is illustrated in the image below. htt ...

`Can you explain how to specify the elements of an array within a form using AngularJS?`

Below is an array containing objects: //Data source code $scope.data = [ { name: 'Lname', items: [{ label: 'Lastname', type: 'text', model: 'lname', pattern: '/^[a-zA-Z]$/', ...

What methods does VS Code use to display type errors in TypeScript given that TypeScript requires compilation?

TypeScript is a language known for being statically typed, giving it the ability to verify types during the compilation process and translate the code into JavaScript. Considering this, how is it possible for VS Code to detect type errors without the code ...

What is the best way to combine two responses and then convert them into a promise?

When making two calls, the firstCallData prints data fine. However, when I use + to merge the responses, it returns me the following Response. What is a better approach to achieve this task? main.ts let data = await this.processResponse(__data.Detail ...

Attempting to render a container within a hidden div and then make it visible results in an error

There appears to be an issue with ExtJS 6 regarding a bug. The problem can be replicated with minimal code in this online demo. In the code snippet below, we have a hidden div: <div id="btn"></div> <div style="display:none" id="outer_contai ...

Customizing date colors in JavaScript: A step-by-step guide

var active_dates1 = ["2017-04-02 00:00:00","2014-04-03 00:00:00","2014-04-01 00:00:00"]; $('.datePick', this.$el).datepicker( beforeShowDay: function (date) { for(let date1 of active_dates1){ if (date.getTime( ...

Using Angular 2: Implementing Router into myExceptionHandler

Within my app.module.ts, I've set up the following code: @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpModule ], providers: [ ...

Exploring new possibilities in ChartJS with the use of multiple Y

I have successfully created a line chart using Chart.js with two datasets, each having its own Y scale and axis. The code for my datasets and options is as follows: datasets: [{ fill:false, label: 'Heat', yAxisID: "y-axis-1", da ...

Unable to save data in local storage

I'm enhancing an existing chrome extension while ensuring a consistent style. I am looking to implement a new feature, and I have written a script that saves the user's selection from the popup and sets a new popup based on that choice going forw ...

Extending momentjs functionality with a custom method in Typescript

I am attempting to extend the momentjs prototype with a new function. In JavaScript, I achieved this with the following code: Object.getPrototypeOf(moment()).isWeekend = function() { return this.isoWeekday() >= 6; }; How can I accomplish this in T ...

Try out different widths to evaluate the responsiveness of your React components

A scenario is described where a Drawer and a Button are implemented in the DOM to only appear when the window width is less than 600. The following code represents the implementation of the Drawer and Button. <Hidden smUp> <Button className ...

Using innerHTML in React to remove child nodes Tutorial

I'm encountering slow performance when unmounting over 30,000 components on a page using conditional rendering triggered by a button click. This process takes around 10+ seconds and causes the page to hang. Interestingly, setting the parent container& ...

React.Children does not reveal the presence of any offspring

I am looking to implement react-native-maps-clustering in my project. However, this library only accepts markers that are direct children of the maps component. An example of how it should be structured: <MapView> <Marker/> <Marker/> ...

Typescript types can inadvertently include unnecessary properties

It seems that when a class is used as a type, only keys of that class should be allowed. However, assigning [Symbol()], [String()], or [Number()] as property keys does not result in an error, allowing incorrect properties to be assigned. An even more curio ...