Asserting request payload (waitForRequest) in v2 documentation

[karlosos]

After upgrading to v2, the code copied from the documentation is not functioning properly.

function waitForRequest(method: string, url: string) {
  let requestId = ''

  return new Promise<MockedRequest>((resolve, reject) => {
    server.events.on('request:start', (req) => {
      const matchesMethod = req.method.toLowerCase() === method.toLowerCase()
      const matchesUrl = matchRequestUrl(req.url, url).matches

      if (matchesMethod && matchesUrl) {
        requestId = req.id
      }
    })

    server.events.on('request:match', (req) => {
      if (req.id === requestId) {
        resolve(req)
      }
    })

    server.events.on('request:unhandled', (req) => {
      if (req.id === requestId) {
        reject(
          new Error(`The ${req.method} ${req.url.href} request was unhandled.`),
        )
      }
    })
  })
}

Is it still possible to retrieve a request reference and write request assertions (i.e., determine if the correct request payload was sent) in v2? I am unable to find this information in the new documentation.

[karlosos]

I found the solution here: https://github.com/zextras/carbonio-shell-ui/blob/devel/src/mocks/server.ts

import { LifeCycleEventsMap, matchRequestUrl } from 'msw';
import { setupServer } from 'msw/node';

import handlers from './handlers';

const server = setupServer(...handlers);
export default server;

export function waitForRequest(method: string, url: string): Promise<Request> {
	let requestId = '';

	return new Promise((resolve, reject) => {
		server.events.on('request:start', (info) => {
			const matchesMethod = info.request.method.toLowerCase() === method.toLowerCase();
			const { matches: matchesUrl } = matchRequestUrl(new URL(info.request.url), url);

			if (matchesMethod && matchesUrl) {
				requestId = info.requestId;
			}
		});

		server.events.on('request:match', (info) => {
			if (info.requestId === requestId) {
				resolve(info.request);
			}
		});

		server.events.on('request:unhandled', (info) => {
			if (info.requestId === requestId) {
				reject(new Error(`The ${info.request.method} ${info.request.url} request was unhandled.`));
			}
		});
	});
}

---

UPDATE: it seems that is not working the same as the implementation from v1. For a while, I'll stay on v1, as this function is really necessary for my workflow.

[kettanaito]

Hi!
You are looking at v1 docs. The v2 docs for the life-cycle events are here: https://mswjs.io/docs/api/life-cycle-events/

[karlosos]

You are looking at v1 docs. The v2 docs for the life-cycle events are here: mswjs.io/docs/api/life-cycle-events

I noticed that the section "Asserting requests payload" is present in the v1 documentation but has been removed from the v2 documentation.

This removal was likely intentional, as it's recommended to avoid request assertions. However, I've heavily utilized the waitForRequest function in my codebase.

The solution I proposed for porting waitForRequest to v2, outlined in this comment, isn't functioning correctly.

[kettanaito]

This removal was likely intentional, as it's recommended to avoid request assertions.

While we still discourage request assertions, I think the removal of that example was accidental. It took a lot of time to (re)write the docs for v2 so some things got lost along the way.

I think we should re-add the example. I propose to add it to the Exceptions section of the "Avoid request assertions" best practice. Does that make sense to you?

it seems that is not working the same as the implementation from v1.

Can you please share more details about what exactly is not working?

[karlosos]

Can you please share more details about what exactly is not working?

Looks like everything works fine. The waitForRequest method needs some minor adjustments after migration. This is how it looks after my changes:

export const waitForRequest = (method: string, url: string) => {
  let requestId = "";

  return new Promise<Request>((resolve, reject) => {
    server.events.on("request:start", (req) => {
      const matchesMethod =
        req.request.method.toLowerCase() === method.toLowerCase();
      const matchesUrl = matchRequestUrl(new URL(req.request.url), url).matches;

      if (matchesMethod && matchesUrl) {
        requestId = req.requestId;
      }
    });

    server.events.on("request:match", (req) => {
      if (req.requestId === requestId) {
        resolve(req.request);
      }
    });

    server.events.on("request:unhandled", (req) => {
      if (req.requestId === requestId) {
        reject(
          new Error(
            `The ${req.request.method} ${
              new URL(req.request.url).href
            } request was unhandled.`
          )
        );
      }
    });
  });
};

So in summary:

req.id -> req.requestId
req.url -> req.request.url
MockedRequest -> Request
resolve(req) -> resolve(req.request)

You can see the changes on this example repo I've created: karlosos/msw-request-assertions#1

---

I think we should re-add the example. I propose to add it to the Exceptions section of the "Avoid request assertions" best practice. Does that make sense to you?

Yes. That would be great.