msw: React Native Msw And Axios Not Working Together
When I make requests to msw handlers, axios returns empty strings as data for some reason, but when I make requests with fetch, the data comes correctly. when I check if the handlers are triggered, the handlers are triggered. When I make a request to another api I get data with axios. can you help me to solve the problem?
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
async function enableMocking() {
await import('./msw.polyfills');
const {server} = await import('./src/mocks/server');
server.listen();
}
enableMocking();
AppRegistry.registerComponent(appName, () => App);
server.js
import {setupServer} from 'msw/native';
import {handlers} from './handlers';
export const server = setupServer(...handlers);
My Fetch Method:
const testFetch = async () => {
try {
const res = await axios.get('https://api.myMockApi.com/getAllProducts');
const data = await res.data;
console.log(data);
} catch (error) {
console.log(error);
}
};
handlers.js:
http.get(`${url}/getAllProducts`, async ({}) => {
console.log("test");
return HttpResponse.json(marketData);
}),
The Console Log Here Works Both In Fetch And In Axios
"axios": "^1.6.5"
"react": "18.2.0",
"react-native": "0.73.4",
"fast-text-encoding": "^1.0.6",
"react-native-url-polyfill": "^2.0.0",
"msw": "^2.1.7",
Node Version : v18.13.0
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Reactions: 11
- Comments: 19
Just want to also chime in here and say I’m seeing the same issue where the body is undefined/null when using MSW, Axios, and React Native:
Fetch works fine! I’ve followed the basic set up steps in repo. I see similar comments: https://github.com/mswjs/msw/issues/1775#issuecomment-1937308589 and here: https://github.com/mswjs/msw/issues/1926#issuecomment-1937017406 (same user)
It sounds like it’s somehow related to the XMLHttpRequest interceptor/stack…I do notice that it seems to be hitting the /browser codepath, and not the /node/native codepath (if that matters).
I’ve found workaround. We can use
_bodyInitif we have no body.Here is fixed logs:
First of all, thank you all very much for your answers, I could not follow the issues for a while. I used an alternative library as a solution, thank you.
This is not an issue with MSW, it’s an issue with whatwg-fetch - I think this one - which might make it an issue to be raised over there (although the one I’ve referenced is closed), or perhaps an issue could be raised in react-native to use a different polyfill.
EDIT: Also same issue in RN repo. Hey, at least that one’s open! EDIT 2: Possible solution SO answer
Hey @kettanaito
I’ve set up a basic reproducible example here (as simple as I could): https://github.com/zibs/mvce-msw-rn if you have the chance to take a look. The warning that is thrown in the video is " Cannot retrieve XMLHttpRequest response body as XML: DOMParser is not defined. You are likely using an environment that is not browser or does not polyfill browser globals correctly.", but I don’t think is totally relevant (but maybe?)…
I’m happy to continue digging in, but you might be able to diagnose it much faster!
When digging I noticed that here https://github.com/mswjs/interceptors/blob/133754688adeb47cb972ab358db5e77f30084e03/src/interceptors/XMLHttpRequest/XMLHttpRequestController.ts#L335 there is never a
.bodyin the response, but there is a._bodyInitand._bodyText… not sure if that’s helpful/important.Let me know if you want a separate issue created or anything.
Same problem here. Using MSW with Axios in React Native doesn’t work. The request response is not finalized and does not return the JSON as it should.
For anybody who comes across this, this patch needs to be applied on the
@mswjs/interceptors-package, NOTmsw