Response delay not working?

[mitchconquer]

Describe the bug

Hi! I'm using MSW with Create React App Typescript and I'm having an issue getting the response delay to work. The MSW log message in the console does respect the response delay but the fetch response does not.

Environment

• msw: ^0.13.1
• nodejs: v13.12.0
• npm: 6.14.4
• react-scripts: 3.4.1
• typescript: ^3.8.3
• Chrome Version 81.0.4044.129 (Official Build) (64-bit)

To Reproduce

I have created a code sandbox to try to reproduce this issue but cannot get it to work. Not sure if you have any guidance on that?

Steps to reproduce the behavior:

1. Create CRA with --template typescript
2. Add MSW with yarn add -D msw
3. Run npx msw init ./public
4. Create route with delay
5. Fetch to route

When fetch to route, the response comes back immediately but the MSW console message waits for the delay and then appears.

Expected behavior

I expect the response from the mock API to wait until the delay before returning. Is that a misunderstanding of the library?

Screenshots

I have created a GIF to show the issue. I put a console log around my fetch statement like below to show when the request starts and finishes.

console.log(`Fetch request started: ${new Date()}`);

const res = await window.fetch(
  `${API_URL_BASE}/${API_PREFIX}/${endpoint}`,
  config
);

  console.log(`Fetch response received: ${new Date()}`);

In the GIF, I click the "load more customers" button and you can see the fetch response start and finish immediately while the MSW log waits 2000ms to appear.

In my mocked endpoint, if I add the following lines, the fetch response is correctly delayed.

await new Promise((r) => {
  setTimeout(r, faker.random.number(2000));
});

Any idea what could be causing this issue? Thanks!

[modularcoder]

+1 happens for me

[hehehai]

@mitchconquer Yes, it was a mistake.

This is because of the delay error in the mockserviceworker.js file. You can start by modifying the documentation in the mockserviceworker.js file

after modification

setTimeout(
    resolve.bind(this, createResponse(clientMessage)),
    clientMessage.payload.delay,
)

We'll fix it as soon as possible

[modularcoder]

@hehehai that worked, thanks a lot!

[mitchconquer]

Awesome, thanks!!

[kettanaito]

@hehehai, thank you for the fix! Indeed, since the message structure change I've overlooked where the delay is stored. Your changes look good, will approve and release.

Note that by design you shouldn't modify the mockServiceWorker.js directly. Once the patch is released, the library will suggest you to replace it with npx msw init once more, which is the established way to propagate changes and fixes like this one to the worker file.

[kettanaito]

Released in 0.15.5. Please update and run npx msw init <PUBLIC_DIR> once more for the changes in the worker file to propagate to your project automatically.

Thank you once more for raising this and for a quick fix.