Unit test: How to mock axios in react?











up vote
0
down vote

favorite












I'm testing a axios inside the getArticlesFromDatabase.



Seems like I'm doing wrong, cause console shows following message:




(node:36919) UnhandledPromiseRejectionWarning: Unhandled promise
rejection (rejection id: 5): here is reject fail:

(node:36919)
DeprecationWarning: Unhandled promise rejections are deprecated. In
the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code.




How to fix it?





csrfData.js



import axios from 'axios';

var getArticlesFromDatabase = new Promise(function(resolve, reject) {
axios.get('127.0.0.1:8000/api/articles/get-articles-list').then(response=>{
resolve('herer is resolve success: ',response.data);
}).catch(function (error) {
reject('herer is reject fail: ',error);
});
});

export {getArticlesFromDatabase};


csrfData.test.js



import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

import {getArticlesFromDatabase} from '../components/common/csrfData';

configure({adapter: new Adapter()});

describe('csrfData', function () {

it('csrfData ', function () {

let mock = new MockAdapter(axios);
const data = { response: true };
mock.onGet('127.0.0.1:8000/api/articles/get-articles-list').reply(200, data);

getArticlesFromDatabase.then(function(value) {
console.log('getArticlesFromDatabase: ',value);
});

});

});









share|improve this question






















  • This would help you stackoverflow.com/questions/48172819/…
    – Shubham Khatri
    Feb 7 at 7:49















up vote
0
down vote

favorite












I'm testing a axios inside the getArticlesFromDatabase.



Seems like I'm doing wrong, cause console shows following message:




(node:36919) UnhandledPromiseRejectionWarning: Unhandled promise
rejection (rejection id: 5): here is reject fail:

(node:36919)
DeprecationWarning: Unhandled promise rejections are deprecated. In
the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code.




How to fix it?





csrfData.js



import axios from 'axios';

var getArticlesFromDatabase = new Promise(function(resolve, reject) {
axios.get('127.0.0.1:8000/api/articles/get-articles-list').then(response=>{
resolve('herer is resolve success: ',response.data);
}).catch(function (error) {
reject('herer is reject fail: ',error);
});
});

export {getArticlesFromDatabase};


csrfData.test.js



import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

import {getArticlesFromDatabase} from '../components/common/csrfData';

configure({adapter: new Adapter()});

describe('csrfData', function () {

it('csrfData ', function () {

let mock = new MockAdapter(axios);
const data = { response: true };
mock.onGet('127.0.0.1:8000/api/articles/get-articles-list').reply(200, data);

getArticlesFromDatabase.then(function(value) {
console.log('getArticlesFromDatabase: ',value);
});

});

});









share|improve this question






















  • This would help you stackoverflow.com/questions/48172819/…
    – Shubham Khatri
    Feb 7 at 7:49













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm testing a axios inside the getArticlesFromDatabase.



Seems like I'm doing wrong, cause console shows following message:




(node:36919) UnhandledPromiseRejectionWarning: Unhandled promise
rejection (rejection id: 5): here is reject fail:

(node:36919)
DeprecationWarning: Unhandled promise rejections are deprecated. In
the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code.




How to fix it?





csrfData.js



import axios from 'axios';

var getArticlesFromDatabase = new Promise(function(resolve, reject) {
axios.get('127.0.0.1:8000/api/articles/get-articles-list').then(response=>{
resolve('herer is resolve success: ',response.data);
}).catch(function (error) {
reject('herer is reject fail: ',error);
});
});

export {getArticlesFromDatabase};


csrfData.test.js



import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

import {getArticlesFromDatabase} from '../components/common/csrfData';

configure({adapter: new Adapter()});

describe('csrfData', function () {

it('csrfData ', function () {

let mock = new MockAdapter(axios);
const data = { response: true };
mock.onGet('127.0.0.1:8000/api/articles/get-articles-list').reply(200, data);

getArticlesFromDatabase.then(function(value) {
console.log('getArticlesFromDatabase: ',value);
});

});

});









share|improve this question













I'm testing a axios inside the getArticlesFromDatabase.



Seems like I'm doing wrong, cause console shows following message:




(node:36919) UnhandledPromiseRejectionWarning: Unhandled promise
rejection (rejection id: 5): here is reject fail:

(node:36919)
DeprecationWarning: Unhandled promise rejections are deprecated. In
the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code.




How to fix it?





csrfData.js



import axios from 'axios';

var getArticlesFromDatabase = new Promise(function(resolve, reject) {
axios.get('127.0.0.1:8000/api/articles/get-articles-list').then(response=>{
resolve('herer is resolve success: ',response.data);
}).catch(function (error) {
reject('herer is reject fail: ',error);
});
});

export {getArticlesFromDatabase};


csrfData.test.js



import React from 'react';
import {shallow, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import {expect} from 'chai';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

import {getArticlesFromDatabase} from '../components/common/csrfData';

configure({adapter: new Adapter()});

describe('csrfData', function () {

it('csrfData ', function () {

let mock = new MockAdapter(axios);
const data = { response: true };
mock.onGet('127.0.0.1:8000/api/articles/get-articles-list').reply(200, data);

getArticlesFromDatabase.then(function(value) {
console.log('getArticlesFromDatabase: ',value);
});

});

});






reactjs unit-testing






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Feb 7 at 7:33









jimmy

2191212




2191212












  • This would help you stackoverflow.com/questions/48172819/…
    – Shubham Khatri
    Feb 7 at 7:49


















  • This would help you stackoverflow.com/questions/48172819/…
    – Shubham Khatri
    Feb 7 at 7:49
















This would help you stackoverflow.com/questions/48172819/…
– Shubham Khatri
Feb 7 at 7:49




This would help you stackoverflow.com/questions/48172819/…
– Shubham Khatri
Feb 7 at 7:49












2 Answers
2






active

oldest

votes

















up vote
0
down vote



accepted










There is a adapter plugin which helps in mocking the axios



https://github.com/ctimmerm/axios-mock-adapter



you can also refer my gist if you have generic method which returns the Axios Instance



https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc






share|improve this answer




























    up vote
    0
    down vote













    Even i struggled a lot for this. But eventually i got the solution.



    Here it is:



        import { .. } from '../yourServices';
    jest.mock('axios');
    var axios = require('axios');
    //If you use get, post write as below, If you are using axios(config) dont need to mock below
    jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));


    Then in your tests



        describe('Sample Test', () => {
    it('Should get - Test', async () => {

    const mockedResponse = Promise.resolve({
    Response data
    });

    //Make sure you mock the the functions at import (above) before using here.
    //Post case
    axios.post.mockResolvedValue(mockedResponse);
    //Create Case
    axios.create.mockResolvedValue(mockedResponse);
    //get ....


    //If you use default axios(url, config) or axios(config)
    axios.mockResolvedValue(mockedResponse);

    //Your code
    });
    });





    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














       

      draft saved


      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48658252%2funit-test-how-to-mock-axios-in-react%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      0
      down vote



      accepted










      There is a adapter plugin which helps in mocking the axios



      https://github.com/ctimmerm/axios-mock-adapter



      you can also refer my gist if you have generic method which returns the Axios Instance



      https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc






      share|improve this answer

























        up vote
        0
        down vote



        accepted










        There is a adapter plugin which helps in mocking the axios



        https://github.com/ctimmerm/axios-mock-adapter



        you can also refer my gist if you have generic method which returns the Axios Instance



        https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc






        share|improve this answer























          up vote
          0
          down vote



          accepted







          up vote
          0
          down vote



          accepted






          There is a adapter plugin which helps in mocking the axios



          https://github.com/ctimmerm/axios-mock-adapter



          you can also refer my gist if you have generic method which returns the Axios Instance



          https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc






          share|improve this answer












          There is a adapter plugin which helps in mocking the axios



          https://github.com/ctimmerm/axios-mock-adapter



          you can also refer my gist if you have generic method which returns the Axios Instance



          https://gist.github.com/abhirathore2006/2bdc5e7e696e39e2cbf8b1800e33ecfc







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Feb 7 at 7:40









          abhirathore2006

          2,1391624




          2,1391624
























              up vote
              0
              down vote













              Even i struggled a lot for this. But eventually i got the solution.



              Here it is:



                  import { .. } from '../yourServices';
              jest.mock('axios');
              var axios = require('axios');
              //If you use get, post write as below, If you are using axios(config) dont need to mock below
              jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));


              Then in your tests



                  describe('Sample Test', () => {
              it('Should get - Test', async () => {

              const mockedResponse = Promise.resolve({
              Response data
              });

              //Make sure you mock the the functions at import (above) before using here.
              //Post case
              axios.post.mockResolvedValue(mockedResponse);
              //Create Case
              axios.create.mockResolvedValue(mockedResponse);
              //get ....


              //If you use default axios(url, config) or axios(config)
              axios.mockResolvedValue(mockedResponse);

              //Your code
              });
              });





              share|improve this answer

























                up vote
                0
                down vote













                Even i struggled a lot for this. But eventually i got the solution.



                Here it is:



                    import { .. } from '../yourServices';
                jest.mock('axios');
                var axios = require('axios');
                //If you use get, post write as below, If you are using axios(config) dont need to mock below
                jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));


                Then in your tests



                    describe('Sample Test', () => {
                it('Should get - Test', async () => {

                const mockedResponse = Promise.resolve({
                Response data
                });

                //Make sure you mock the the functions at import (above) before using here.
                //Post case
                axios.post.mockResolvedValue(mockedResponse);
                //Create Case
                axios.create.mockResolvedValue(mockedResponse);
                //get ....


                //If you use default axios(url, config) or axios(config)
                axios.mockResolvedValue(mockedResponse);

                //Your code
                });
                });





                share|improve this answer























                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  Even i struggled a lot for this. But eventually i got the solution.



                  Here it is:



                      import { .. } from '../yourServices';
                  jest.mock('axios');
                  var axios = require('axios');
                  //If you use get, post write as below, If you are using axios(config) dont need to mock below
                  jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));


                  Then in your tests



                      describe('Sample Test', () => {
                  it('Should get - Test', async () => {

                  const mockedResponse = Promise.resolve({
                  Response data
                  });

                  //Make sure you mock the the functions at import (above) before using here.
                  //Post case
                  axios.post.mockResolvedValue(mockedResponse);
                  //Create Case
                  axios.create.mockResolvedValue(mockedResponse);
                  //get ....


                  //If you use default axios(url, config) or axios(config)
                  axios.mockResolvedValue(mockedResponse);

                  //Your code
                  });
                  });





                  share|improve this answer












                  Even i struggled a lot for this. But eventually i got the solution.



                  Here it is:



                      import { .. } from '../yourServices';
                  jest.mock('axios');
                  var axios = require('axios');
                  //If you use get, post write as below, If you are using axios(config) dont need to mock below
                  jest.mock('axios', () => ({ post: jest.fn(),create: jest.fn() }));


                  Then in your tests



                      describe('Sample Test', () => {
                  it('Should get - Test', async () => {

                  const mockedResponse = Promise.resolve({
                  Response data
                  });

                  //Make sure you mock the the functions at import (above) before using here.
                  //Post case
                  axios.post.mockResolvedValue(mockedResponse);
                  //Create Case
                  axios.create.mockResolvedValue(mockedResponse);
                  //get ....


                  //If you use default axios(url, config) or axios(config)
                  axios.mockResolvedValue(mockedResponse);

                  //Your code
                  });
                  });






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 8 at 11:17









                  Sanjeev Rao

                  1,43311116




                  1,43311116






























                       

                      draft saved


                      draft discarded



















































                       


                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48658252%2funit-test-how-to-mock-axios-in-react%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Guess what letter conforming each word

                      Port of Spain

                      Run scheduled task as local user group (not BUILTIN)