Problem using the RestContext.delay()

[AndreasHoffmannPotsdam]

Hi all,
I have a simple react component that displays parts of the users from "https://jsonplaceholder.typicode.com/users".
When the request times out then an error message should be displayed.
=> see User.tsx in the attached sources
The component is working fine and the message is displayed. I have checked the correct functioning of the component with:

• Connecting to "https://jsonplaceholder.typicode.com/users" with very low timeout
• Using a locally running sevice with delay of 2000 ms
• Using a registered Mock Service Worker in the browser

But testing this functionallity with react testing does not work.

• I am using the service mocks from the mocks-folder
• I have set the delay of the handler to 2000ms
• I have set the timeout of the request to 1000ms
• I render the component and wait for the error message to be displayed.
  => The test passes if I use a locally running server with the same delay
  => The test fails if I use the Server mock

What happens:

• The request is launched
• Instead of getting a timeout error and therefore going into the catch block (line 30 in User.tsx) the response is processed in line 26 in Users.tsx and the Users are displayed.

What I would expect:

• The request processing should jump to the catch block and the error message should be displayed as it happens in the browser.

Do you have any idea why this is not working as expected?
It seems that the returned Promise from Mock Service Worker when used in node within a test is not rejected and works different from the case where a "real call" is made.
I could not find any example for this kind of testing in the internet.

Every help is wellcome.

Thanks,
Andreas
UsersAppCode.zip

[kettanaito]

Hi, @AndreasHoffmannPotsdam.

There are two things that may be at play here:

1. MSW does not respect the set timeout.
2. Axios handles its timeout option differently from the timeout produced by MSW.

Now, how to validate each.

MSW does not respect the set timeout

This can be validated if you print a timestamp before the request is made and once the response is received in your component.

console.log('started:', new Date())

axios.get('...')
  .then(() => console.log('received:', new Date())

Do you see the X time difference between the two timestamps where X is the delay duration you used in handlers.js? If you do, then MSW applies the delay. If you don't, let me know.

Axios handles its timeout differently

The easiest way to check this is to dive into Axios' source code but I don't require this from our contributors. Instead, let's look at it together.

First things first, Axios works differently in the browser and in Node.js. Since you're running tests in Node.js, let's analyze how it handles the timeout option there:

https://github.com/axios/axios/blob/21a5ad34c4a5956d81d338059ac0dd34a19ed094/dist/node/axios.cjs#L3040

We can see it calling the req.setTimeout(timeout, callback) method on req but what is req?

https://github.com/axios/axios/blob/21a5ad34c4a5956d81d338059ac0dd34a19ed094/dist/node/axios.cjs#L2855

Where the transport.request is really either http or https default module export:

https://github.com/axios/axios/blob/21a5ad34c4a5956d81d338059ac0dd34a19ed094/dist/node/axios.cjs#L2832

Which, I can assume, resolves to http.ClientRequest and its setTimeout method:

https://github.com/nodejs/node/blob/71165e111a8606ad37784d992b8d3cee4fbf0156/lib/_http_client.js#L930

This taps into the net.Socket and invokes the timeout callback whenever the connection hasn't been established by the specified time.

We do test the explicit setTimeout scenario in MSW:

• https://github.com/mswjs/interceptors/blob/36400ccc47bf53b269888a7a3a5f452df592f58b/test/modules/http/regressions/http-socket-timeout.ts#L34

But not in conjunction with Axios.

As of now, I don't see what may be causing this issue. I can suspect that if we're talking about connection timeout (and not response received timeout), it may be that MSW simply waits for the specified ctx.delay() duration before returning the mocked response. I don't believe it actually uses that delay as a blocked server time at the moment.

Sorry, I don't know right now what may be causing this.

[AndreasHoffmannPotsdam]

Hi @kettanaito
first of all thanks for your emediate reply, fantastic!!!

As you assumed I allready did the logging of the times when things happens.

The response is processed after the delay of MSW, so that works. Also the returned data is shown on the rendered page.

Umfortunately the code from axios is not understandable...

I also did a test with using the "pure fech function" instead of axios but with the same result.
That would mean it has nothing to do with axios right?
I can redo those tests to prove again. I had strugles with that fetch api and can probably do better on the second try.

Weird problem

Any suggestions about what to do next?

Kind regards and again thanks a lot, Andreas