使用 axios 执行经过身份验证的请求时，Jest 返回“网络错误”

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 (fixer.io) with no headers <--- This works
• Test a local API server with headers <--- This does NOT work
• Test same local API with headers from node terminal <--- This works

What could be the reason behind this behavior? And what is the solution?

//This WORKS
test('testing no headers', () => {
  return axios.get('http://api.fixer.io/latest')
        .then( res => console.log(res) )
});

//This DOES NOT work
test('testing no headers', () => {
  return axios.get('http://localhost:3000/users/4/profile', 
                      {headers:{authorization:`Bearer ${mytoken}`}})
        .then( res => console.log(res) )
});

//...

//Node Terminal
//This WORKS
> axios.get('http://localhost:3000/users/4/profile', 
                   {headers:{authorization:`Bearer ${mytoken}`}})
        .then( res => console.log(res) )

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

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;

Answer 3

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 4

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 5

I work on Next.js projects where I have both frontend and backend tests and setting testEnvironment to 'node' does not work.

So I configure jest.config.js as

testEnvironment: 'jest-environment-jsdom',

and add

/**
 * @jest-environment node
 */

to all backend tests.