How to use with axios on Node?

[d9k]

global.fetch = require('node-fetch');
global.Headers = fetch.Headers;
MR = require('mock-requests');
global.axios = require('axios');

MR.setMockUrlResponse('http://localhost:1111/t', {
  mockExample: 1
});

fetch('http://localhost:1111/t').then((response) => response.json()).then(data => console.log(data));

axios.get('http://localhost:1111/t').then(resp => console.log(resp));
// request fails

[d9k]

As MockRequests doc says:

Full support for use along with third-party libraries, including Axios and jest, so they function as normal while still giving you the mocks you want.

axios on Node uses http and https

https://github.com/axios/axios/blob/e9965bfafc82d8b42765705061b9ebe2d5532493/lib/defaults.js#L17-L27

As far as I can understand MockRequests don't patch these node APIs.

[d9k]

Tried dirty workaround with https://www.npmjs.com/package/xmlhttprequest

global.fetch = require('node-fetch');
global.Headers = fetch.Headers;
global.XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
MR = require('mock-requests');
global.axios = require('axios');

MR.setMockUrlResponse('http://localhost:1111/t', {
  mockExample: 1
});

axios.get('http://localhost:1111/t').then(resp => console.log(resp));
// Error "Cannot read property 'headers' of undefined"
// at exports.XMLHttpRequest.getAllResponseHeaders at node_modules/xmlhttprequest/lib/XMLHttpRequest.js:239`

[d9k]

Had more luck with msw on Node.js out of the box:

msw = require('msw');
msw_node = require('msw/node');
axios = require('axios');

server = msw_node.setupServer(
  msw.rest.get(
    'http://localhost:1111/t',
    (req, res, ctx) => {
      return res(ctx.json({ firstName: 'John' }))
    }
  )
);

server.listen();

axios.get('http://localhost:1111/t').then(resp => console.log(resp));

// server.close();

[D-Pow]

Interesting find! After doing a quick deep-dive, there seems to be two factors at play here:

1. Node doesn't support fetch nor XMLHttpRequest.
2. Axios never uses fetch, it only ever uses XMLHttpRequest or http(s).

For (1), using the polyfills directly seems to work relatively well, as you've shown with node-fetch.

For (2), Axios is supported for any environment that has fetch/XMLHttpRequest defined either natively or with a completely accurate polyfill. node-fetch seems to have a correct implementation of fetch in that the fields, classes, etc. are properly defined and default values properly filled in. However, the node-XMLHttpRequest implementation (a wrapper around url) seems to have a slight deviation in underlying implementation than the native, "normal" XMLHttpRequest. That deviation seems to be what's causing that error you see above -- some of the fields aren't being properly populated/defaulted so it's propagating the error upwards.

This would be a relatively simple fix so I'll try to push one up soon. Thanks for bringing this up, it will help create a better product!

[d9k]

@D-Pow, thanks for the answer!

I made pull request driverdan/node-XMLHttpRequest#191 for node-XMLHttpRequest which solves my error.

[D-Pow]

Nice! If it's any help, the main thing I noticed that caused this issue was more that the response.headers was never defaulted like it is in native XMLHttpRequest.

Specifically, consider a case like this:

// Comments are console output.
/*** Native ***/
let xhr = new XMLHttpRequest();
// undefined
xhr.open('GET', '');
// undefined
xhr.getAllResponseHeaders()
// ""

Here, xhr has an internal default value of headers = {} so getAllResponseHeaders() would be the equivalent of return Object.entries(headers).reduce((str, [ headerKey, headerVal ]) => ..., ''); and wouldn't fail even if headers were empty.

So the key point I meant in my first reply is that they:

1. Don't set default values on the response object, nor on headers and other response-based fields, i.e.

var headers = {};

var response = {
  // values from the response object that are copied over to their middle-man response object.
  // e.g.
  headers: headers,
  status: null, // or 1
  // ... other keys with default values
};

2. Copy the default values to their middle-man response if they don't exist, i.e.

// First, applies defaults from original `response` in (1).
// Second, overwrites `response` fields from (1) if they're present in the actual response, `resp`.
response = Object.assign({}, response, resp);

If both (1) and (2) were addressed, there wouldn't be any other edge cases with other fields that you and I haven't figured out yet.

[D-Pow]

This should be fixed in PR #17. Please let me know if you still encounter any issues!