msw server post request not returning body

Question

Here's how I'm setting up the server

const server = setupServer(
    http.post('http://172.17.0.1:3001/auth/confirm', async ({ request }) => {
        const newPost = await request.json() as Request;

        return HttpResponse.json({ body: newPost }, { status: 400 });
    })
);

I'm setting up my tests with

beforeAll(() => server.listen());
render(<ConfirmationPage />);

The component makes the request on load with

axios.post('http://172.17.0.1:3001/auth/confirm', {
    headers: { 'Content-Type': 'application/json' }, responseType: 'json'
}).then(response => {
    console.log('here success', response);
}).catch(error => {
    console.log('here error', error);
});

But the response is coming back with an empty string for data

{ data: '', status: 400 ...}

The only other info I can think of is the testEnvironment in jest is jest-environment-jsdom and the setupFiles is the following

const { TextDecoder, TextEncoder } = require('util');
const { Response } = require('whatwg-fetch');

global.Response = Response;

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

Answer 1

I was having similar problems when updating my msw package from 0.39 to the latest. I was able to change the status of the response but the body would always be an empty string. Looking at their docs for frequent issues it shows to install the 'undici' library to define global properties. I was using the latest 6.2.0 version of 'undici' when I should have been using an earlier major version, so switching to 5.2.0 instead fixed the issue for me