Jest returns “Network Error” when doing an authenticated request with axios

Question

This seems a bit weird to me. I\'m trying to test an actual (ie. real network) request with Jest.

These are the tested scenarios:

• Test an external API (fix

Answer 1

It can be a Jest configuration issue. I solved forcing "node" as jest environment in package.json:

"jest": { "testEnvironment": "node" }

see docs: https://facebook.github.io/jest/docs/configuration.html#testenvironment-string

Answer 2

That is funny,that the axios used XMLHttpRequest by primary,and ajax request can't access across domain,so your test failed ,so you can let your code pass by set the axios adapter.

The Reason by axios/defaults.js

 function getDefaultAdapter() {
    var adapter;
    if (typeof XMLHttpRequest !== 'undefined') {
        // For browsers use XHR adapter
        adapter = require('./adapters/xhr');
    } else if (typeof process !== 'undefined') {
        // For node use HTTP adapter
        adapter = require('./adapters/http');   
    }
    return adapter;
 }

Solution change axios adapter to http

import axios from 'axios';
//This WORKS
test('testing with headers', (done) => {
    var path=require('path');
    var lib=path.join(path.dirname(require.resolve('axios')),'lib/adapters/http');
    var http=require(lib);
    axios.get('http://192.168.1.253', {
        adapter: http,
        headers: {
            Authorization: "Basic YWRtaW46bHVveGlueGlhbjkx"
        }
    }).then((res) => {
        expect(res.status).toBe(200);
        done();
    }).catch(done.fail);
});

Solution change jest testURL in package.json

"jest": {
   "testURL":"http://192.168.1.253"
}

then the test can be access http via ajax

import axios from 'axios';
    //This WORKS
    test('testing with headers', (done) => {
        axios.get('http://192.168.1.253', {
            headers: {
                Authorization: "Basic YWRtaW46bHVveGlueGlhbjkx"
            }
        }).then((res) => {
            expect(res.status).toBe(200);
            done();
        }).catch(done.fail);
    });

Answer 3

I resolved it by adding

axios.defaults.adapter = require('axios/lib/adapters/http');

for a specific test case file, as setting global.XMLHttpRequest = undefined or env=node was causing my other test cases to fail.

Answer 4

Jest allows you to set a setup script file. This file will be required before everything else and gives you a chance to modify the environment in which the tests will run. This way you can unset XMLHttpRequest before axios is loaded and the adapter type evaluated since imports are hoisted. https://facebook.github.io/jest/docs/configuration.html#setuptestframeworkscriptfile-string

This worked for me:

package.json

{
  ...,
  "jest": {
    ...,
    "setupTestFrameworkScriptFile": "./__tests__/setup.js",
    ...
  },
  ...
}

__tests__/setup.js

global.XMLHttpRequest = undefined;