TypeError: (0 , _ApiCalls.default) is not a function jest tesing the axios call

Question

I'm pretty new to Jest and I completed testing all the components of my project and now when I wanted to test the axios call I'm facing this erro.

My test

import addPatients from '../ApiCalls/ApiCalls'
test('patient data is posted',  () => {

    addPatients(data).then(response=>{
    console.log(response.data)

    })
});

Api.js

    export  function addPatients (state){
        console.log(state)
      try {
            const response =  axios.post('/addpatient', state); 
           // add patient calls rails controller, basically I'm using react on rails 
console.log(response);
            return response;
        }
        catch (error) {
            console.log(error);
        }
         };

The project is working perfectly fine, but I'm not able to test that. When I run this test, I get the following error

TypeError: (0 , _ApiCalls.default) is not a function

  22 | test('patient data is posted',  () => {
  23 |   
> 24 |     addPatients(data).then(response=>{
     |     ^
  25 |     console.log(response.data)
  26 |     
  27 |     })

  at Object.<anonymous> (app/javascript/components/__tests__/Api.test.js:24:5)

I tried with :

Adding export default to the function
Adding async and await

Trying from couple of days,nothing seems to work. Please guide me on testing this, as only work pending is test.

addPatients is named export, not default. Import it the same way as in app. — Estus Flask
@EstusFlask I have done the same thing I guess, look at the code. — Abhishek P
You didn't provide the code you use in production. It should be imported as import { addPatients } from .... — Estus Flask

Abhishek P Abhishek P · Accepted Answer · 2020-06-04T07:40:42

So, first as pointed out by @EstusFlask in the comment section, I was importing it in wrong way.

Changed

import addPatients from '../ApiCalls/ApiCalls' to import {addPatients}
from '../ApiCalls/ApiCalls'

Then, I was not mocking the call properly, I'm posting the code with explanation so that it helps some one.

Function which calls Api

 export  function addPatients (state){
            const response =  axios.post('/addpatient', state);
            return response;
        };

Test Case

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter';
import {addPatients} from '../ApiCalls/ApiCalls'

const data ={
            "patientage":"patientage",
            "patientname":"test",
            "patientgender":"patientgender",
            "patientinsurance":"patientinsurance",
            "patientphone":"patientphone",
            "patientdiagnosis":"patientdiagnosis",
            "patientaddreq":"patientaddreq",
            "patientemr":"patientemr"
            }

const mockresponse = {
                       Status:'200'
                     }

describe('addnewpatient', () => {

it('should post patient data', () => {
      const mockRequest = new MockAdapter(axios);
      mockRequest.onPost('/addpatient').reply(200,mockresponse);

return addPatients(data).then(response => expect(response.data.Status).toEqual('200'));
    });
  });

So what basically mockrequest does is whenever a api call is made by the addpatient function instead of calling actual api it calles mock axios request we created along with the data we provided.

In this case mock intercepts when

A call to '/addpatient' is called
The mock responses back with the data we provided, in this case the data Status='200'

Later you can compare the data received by api function and mock data you provided using expect. In my case '/addpatient' calls the rails controller, the url can be anything with respect to your project

TypeError: (0 , _ApiCalls.default) is not a function jest tesing the axios call

1 Answers