nock: Network Error when using nock with axios

I finally resolved the issue by this thread: https://github.com/mzabriskie/axios/issues/305

Below code from @dyakimenko-p works for me:

import {expect} from 'chai'
import axios from 'axios' // v0.15.3
import httpAdapter from 'axios/lib/adapters/http'
import nock from 'nock' // v9.0.2

const host = 'http://localhost';

axios.defaults.host = host;
axios.defaults.adapter = httpAdapter;

describe('suite', () => {
  it('test', done => {
    nock(host)
      .get('/test')
      .reply(200, 'test data');

    axios.get('/test').then(response => {
      expect(response.data).to.be.equal('test data');
      done();
    });
  });
});

My solution by using moxios:

import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import * as actions from './index'
import * as types from './actionTypes'
import axios from 'axios'
import moxios from 'moxios'

const middlewares = [ thunk ];
const mockStore = configureMockStore(middlewares);
const API_END_POINT = process.env.REACT_APP_API_ENDPOINT || 'https://web-api.com/api/v1/';

describe('async actions', () => {
  beforeEach(function () {
    moxios.install()
  });

  afterEach(function () {
    moxios.uninstall()
  });

  it('creates returns data in RECV_DATA when axios contacts request has been done', () => {
    moxios.stubRequest(API_END_POINT + 'contacts', {
      status: 200,
      response: { data: { contacts: [{id: 1, firstName: 'FirstName', displayName: 'FirstName'}] }}
    });

    const expectedActions = [
      { type: types.REQ_DATA },
      { type: types.RECV_DATA, data: { contacts: [{id: 1, firstName: 'FirstName', displayName: 'FirstName'}] } }
    ];
    const store = mockStore({ contacts: [] });

    return store.dispatch(actions.getData('contacts'))
      .then(() => {
        expect(store.getActions()).toEqual(expectedActions)
      })
  })
});

When axios is initializing, it checks if it’s running in browser or node (see here) and it uses the appropriate adapter (http for node, xhr for browser and jsdom).

This means that if you require/import axios after you already have a jsdom globally available, axios will use the xhr adapter and use jsdom’s XMLHttpRequest object.

When axios is getting an error without any details from the browser, it returns a general “Network Error” exception (see here). To get more information about the error you’re getting you can either use jsdom v10.x.x (has a default virtual console that sends everything to node’s console), or if you’re using v9.x.x or bellow, setup a virtual console by yourself:

var virtualConsole = jsdom.createVirtualConsole().sendTo(console);
require('jsdom-global')(..., { virtualConsole });

I’m assuming you’re getting cross-origin errors, if that’s the case, here’s how you can solve it. You can either use axios’s http adapter, which means you don’t go through jsdom’s APIs so no cross origin problems.

For testing react components you probably want to axios to go through jsdom’s APIs, and you want your document running under a domain, and you would like to get cross origin errors if you’re making requests outside of that domain. To make it work, you just need to setup your mocks with nock to return cross origin headers (just like you would on a real browser).

To initialize a jsdom under a domain, just pass a url option, like that:

require('jsdom-global')(..., { url: 'http://some-url.com' });

Finally, return a cors header from nock mocks:

nock('http://some-url.com').get('/').reply(200, 'hello world', {'Access-Control-Allow-Origin': '*'})

Is there any progress being made on this? Really would love to use nock instead of any other methods of HTTP mocking.

Edit: I would love to contribute but I’m quite new to testing and don’t really know where to start so if anyone can give me pointers that would be awesome. 👍

I got the same error

@vrinek I’m using axios. That seems to be the issue.

@ndelvalle It seems that nock and axios don’t play well together, and I believe it’s related to the OPTIONS request axios sends before the actual request. I ended up using this method for stubbing my axios requests, and it’s working for me now.

Hopefully nock will work with axios in the future, though, because the syntax is much nicer.

Just in case it could help someone, I was getting Network Error on hosts other than http://localhost before I installed isomorphic-fetch for my react app.

This problem is related to jsdom, somehow. I switched from using Jest to using Jasmine as my testing framework and axios works out of the box with nock without changing the adapter or anything like that.