Does cy.intercept provide the ability to _not_ send the request to the destination server?

[andycarrell]

When mocking window.fetch, I want to be able to not send the request to the destination service - ie completely intercept the request so the destination doesn't even register it - otherwise when using intercept, the call still makes it to the destination server, which can cause errors within my tests.

There might be a way of achieving this in the docs, but I couldn't find one :(

I currently mock window.fetch by:

	cy.on("window:before:load", (win) => {
		const originalFetch = win.fetch;

		function fetch(url, ...rest) {
			if (
				fetchMock &&
				url === `https://${Cypress.env("MY_URL")}/query`
			) {
				return fetchMock(url, ...rest);
			}
			return originalFetch(url, ...rest);
		}

		cy.stub(win, "fetch").callsFake(fetch);
	});

[bahmutov]

Yes, absolutely. When discussing this we call it spying when you just observe the network calls without intercepting them. These calls go to the server.

We call it stubbing when we stop the network call and return some test response. In this case the HTTP call does not go to the server, it is stopped by the Cypress Proxy.

We have plenty of examples of both spying and stubbing in https://on.cypress.io/intercept, https://on.cypress.io/network-requests, and the "intercept" recipe https://github.com/cypress-io/cypress-example-recipes#stubbing-and-spying In summary: if you do not provide a response object or call reply then the request will be spied on, but not intercepted. If you provide a response or call reply then the request will be intercepted and stopped.

[andycarrell]

Thanks for the explanation 🙏

In this case the HTTP call does not go to the server, it is stopped by the Cypress Proxy

How does this work? When I call req.reply I see failed network requests in my Network tab (see photo) - this in turn causes my fetch handler in code to register an error, and the mock does nothing 😞

[bahmutov]

I am not sure what your code is doing in this case to cause this. Can you provide a fully reproducible example?

…

On Tue, Nov 24, 2020 at 4:36 PM Andy Carrell ***@***.***> wrote: Thanks for the explanation 🙏 In this case the HTTP call does not go to the server, it is stopped by the Cypress Proxy How does this work? When I call req.reply I see failed network requests in my Network tab (see photo) - this in turn causes my fetch handler in code to register an error, and the mock does nothing 😞 [image: image] <https://user-images.githubusercontent.com/22784983/100154083-ed74d480-2f09-11eb-89b4-a747a727199f.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#9320 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQ4BJWGF2C77KLTB5GBEPTSRQROTANCNFSM4UBMVSDA> .

-- Dr. Gleb Bahmutov, PhD Schedule video chat / phone call / meeting with me via https://calendly.com/bahmutov [email protected] @bahmutov <https://twitter.com/@bahmutov> https://glebbahmutov.com/ https://glebbahmutov.com/blog https://github.com/bahmutov

[andycarrell]

👍 I think I've tracked it down, by looking through the examples - I had to update the code to call req.reply and to use res.send to ensure the request doesn't appear in the network tab full stop:

	const interceptor = (request) => {
		request.reply(({ send }) => fetchMock(request).then(send));
	};

	cy.intercept(
		"POST",
		`https://${Cypress.env("RANGER_API_SERVICE_DOMAIN")}/query`,
		interceptor,
	);

In which case I think this discussion can be closed, although I would say the documentation was pretty confusing and unhelpful for this case 👐