Image mocking/stubbing clarification

[the0neWhoKnocks]

Trying to find some clarification on what's actually possible. I've gone over the documentation regarding fixtures and routes, and I've tried all sorts of variations of examples.

Is it possible to mock a response for an external image? There are examples that seem to point to "yes", and other posts where people can't get it to work.

I've tried:

cy.server();
cy.fixture('img.png').then((img) => {
  cy.route('GET', '**/t/p/w154/*', img);
});

// action that triggers image load

const PIXEL = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';
cy.server();
// note the below weren't all tried at once, just demonstrating the iterations
cy.route('GET', '/t/p/w154/*', PIXEL);
cy.route('GET', '/t/p/w154/**', PIXEL);
cy.route('GET', '**/t/p/w154/*', PIXEL);
cy.route('GET', 'http://image.tmdb.org/t/p/w154/*', PIXEL);
cy.route({
  method: 'GET',
  url: /.*\/t\/p\/.*/,
  // url: '**/t/p/**',
  // url: '/t/p/**',
  // url: '/t/p/**/*',
  // url: '/t/p/w154/xlBivetfrtF84Yx0zISShnNtHYe.jpg',
  response: PIXEL,
  status: 200,
});

// action that triggers image load

[the0neWhoKnocks]

Ugh, so after bouncin' around the Web for a while I finally came across this comment which called out cy.route2. Don't know if I can put into words just how frustrating finding this information has been.
If the Cypress team's just gonna start adding numbers on an already established API, it'd be great if there was some sort of global recipes/examples page that outlines how to do certain things instead of having to know the name of every Cypress method and go poking through it's documentation.

For anyone else that comes across this post, here's what I ended up with:

// within cypress.json

"experimentalNetworkStubbing": true,

// within my test

cy.route2('GET', 'http://image.tmdb.org/t/p/**', { fixture: '1x1.png' });

[bahmutov]

We could always use more examples, that's for sure. I would advise you also to look at the example recipes https://github.com/cypress-io/cypress-example-recipes

[the0neWhoKnocks]

Thanks @bahmutov, there was some useful stuff in there.

[the0neWhoKnocks]

Not sure what stays more up-to-date, but I wonder if it'd be useful to have links to the recipes in the docs and visa versa. Perhaps that mixed with some SEO may make all this stuff more discoverable.

[jennifer-shehane]

@the0neWhoKnocks Our plan is to make .route2() an official part of the API, to replace .route(). For now, we are working through the last bits of implementation and bugs, so it isn't as well documented as .route() is yet. Our docs will be updated with more examples when that transition happens. Glad you found an answer to your question!