How to do unit testing when using Axios instances? #1254
Replies: 6 comments 7 replies
-
Hey, @victorhcortesp. Thanks for starting this discussion. At first glance, I see nothing wrong with your MSW setup. Could you please create a reproduction repository for me to look at? Then I'd be able to help you much more efficiently. Without it, it's just wild guessing. We do have a few issues reported around Axios and the latest version of MSW, so this may or may not be the case. In those issues, however, Axios usage threw errors, which doesn't seem to happen in your case. It'd be nice to confirm that. |
Beta Was this translation helpful? Give feedback.
-
Hi @kettanaito , I have made several tests but I can't find the error, I don't know if it is a failure of my implementation or if it is an issue of the library. |
Beta Was this translation helpful? Give feedback.
-
@kettanaito I was testing and I realized that the post is not working properly, I don't know where I have the error. const { rest } = require('msw');
const mswNode = require('msw/node');
const axios = require('axios');
const BASE_URL = 'http://localhost:8000';
const server = mswNode.setupServer(
rest.get(`${BASE_URL}/users`, (_, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
username: 'username',
firstName: 'firstName',
lastName: 'lastName',
})
);
}),
rest.post(`${BASE_URL}/user`, (_req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
id: 'f79e82e8-c34a-4dc7-a49e-9fadc0979fda',
})
);
})
);
describe('Axios API', () => {
beforeAll(() =>
server.listen({
onUnhandledRequest: 'warn', // I added this but it doesn't show me anything, as if it was detecting the route correctly.
})
);
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
it('should call axios get and return a response', async () => {
const data = {
username: 'username',
firstName: 'firstName',
lastName: 'lastName',
};
const response = await axios.get(`${BASE_URL}/users`);
expect(response).toMatchObject({ data, status: 200 });
});
it('should call axios post and return a response', async () => {
server.printHandlers(); // This is showing me the route configurations fine.
const data = {
username: 'username',
firstName: 'firstName',
lastName: 'lastName',
};
const response = await axios.post(`${BASE_URL}/user`, data);
console.log(response.data);
});
}); |
Beta Was this translation helpful? Give feedback.
-
@kettanaito I did some tests with PUT, DELETE passing |
Beta Was this translation helpful? Give feedback.
-
@kettanaito The failure occurs when I pass the second parameter, if I remove it, the test works but fails with the second parameter. const response = await axios.post(`${BASE_URL}/users`, data) |
Beta Was this translation helpful? Give feedback.
-
I think this is connected to #1125, which is fixed by mswjs/interceptors#260. The release should happen tonight, so give it a try following the instructions in 1125. |
Beta Was this translation helpful? Give feedback.
-
I am having trouble getting
msw
to intercept my requests.I have a configuration file in the root, to get all the environment variables. Something like this
I have a folder called mocks and inside it I have two files
NOTE: In the handlers I am performing a stub, the value returned by the config as this baseURL can change depending on the environment variable, so the stub is to ensure that the instance always takes this default value
BASE_URL
.I have another file at a higher level where I create some instances and some functions that use those instances to make the requests. Something like this
From this last file I want to do the unit tests, I am trying something like this, but I am not getting the intersection.
you can imagine a folder structure similar to this one
I would like to know what I am doing wrong or if it is definitely some
msw
problem that does not work very well with axios instances.this is the repository
Environment
msw: 0.42.0
nodejs: 16.15.0
npm: 8.5.5
axios: 0.27.2
Beta Was this translation helpful? Give feedback.
All reactions