using server.use() to override a 400 code response with 200 in next testcase not working

[irfanbacker]

Describe the bug

I am testing my application created using create-react-app. I have an empty handlers list initialised and I am adding the required handlers on each test using server.use(). I am resetting the handlers in afterEach() as recommended. I am using SWR and is clearing the cache also. But SWR isn't used for this particular endpoint. Axios is only used.

I am adding a handler with response 400 in the first test and in the 2nd test, I have a 200 response for the same endpoint. While running the test, the 2nd test still uses the handler from the first test. I tried adding a third test after them with 200 response and it also showed a response of 400. Weirdly enough, rearranging the tests such that the tests with 400 response was at the bottom passed all the tests and returned the responses properly.

Environment

• msw: 0.30.1
• nodejs: 14.17.0
• npm: 6.14.13
• @testing-library/jest-dom: 5.14.1
• @testing-library/react: 11.2.7

To Reproduce

test('1', async () => {
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(400) ) ));
	render(<Component />);
        //Do assertions
});

test('2', async () => {     // This test using handler from first test
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(200) ) ));
	render(<Component />);
        //Do assertions
});

test('3', async () => {     // This test using handler from first test
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(200) ) ));
	render(<Component />);
        //Do assertions
});

This works properly:

test('2', async () => {
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(200) ) ));
	render(<Component />);
        //Do assertions
});

test('3', async () => {
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(200) ) ));
	render(<Component />);
        //Do assertions
});

test('1', async () => {
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(400) ) ));
	render(<Component />);
        //Do assertions
});

Expected behavior

Runtime defined handlers to be reset properly / overridden before the next test.

[kettanaito]

Hey, @irfanbacker.

What test runner do you use? If you use Jest, could you ensure you're not running tests in parallel by using the --runInBand option:

$ jest --runInBand

MSW doesn't support parallel test runs currently and requires you to run your tests sequentially.

Let's see if that's a parallelization issue.

As the next step, please add a server.printHandlers() call after the problematic server.use() (your second test that appends a 200 override):

test('2', async () => {     // This test using handler from first test
        server.use(rest.post('url', (req,res,ctx) => res( ctx.status(200) ) ));
        server.printHandlers()
	render(<Component />);
        //Do assertions
});

See if the appended handler is on the list. You can also share the list in this thread.

After this, run the problematic test case (no. 2) in isolation, keep the 200 overrides. Does it pass? If it does, there may be caching in place, even if it seems that it's irrelevant. Take a close look at what request clients are being used.

Here are also some of the most common reasons issues like this occur:

• Typo in a request handler's URL.
• Enabled caching during the tets run (you've stated you disabled the cache, or it's irrelevant).
• Forgetting to return the res() function call.

Apart from that, I'd ask you to prepare a reproduction repository with this issue. There's little help we can give you with abstract code.