Olá! Vou tentar te ajudar aqui.

Primeiro irei responder às suas perguntas e em sequência responder como eu faria.

• Sim, na grande maioria dos casos você vai querer interceptar a request. Em um cenário que você precisa rodar testes constantemente, seja manualmente, seja em um workflow de CI/CD, ou seja com husky e lint-staged em um pre-commit, por exemplo, não é ideal que sempre haja request para a API, além de ser ruim para a API que irá receber requests em grande quantidade, seu teste se torna dependente da API;
• Você mencionou React e TypeScript, isso é Front-end. Você tem responsabilidade sobre o queé enviado para a API e o que usuário vê em tela, e não os dados que são processados ou recebidos, sua função é garantir que o QR code apareceu em tela, e somente;
• Neste caso você pode utilizar algo como o faker-br para gerar um CPF, por exemplo. Se funcionaria eu não sei, nunca utilizei algo deste tipo, portanto não posso falar nada, cabe a você testar.

Agora, vamos ao que eu faria.

Em primeiro lugar, eu não utilizaria o Cypress, Jest/Vitest com o React Testing Library é suficiente pra isso. Você mencionou que é retornado uma imagem png, essa imagem será renderizada em algum componente. Portanto, utilizaria uma tag img com alt ou aria-label (o alt é mais comum para imagens), obteria o elemento utilizando o getByRole ou getByAltText e verificaria se ele está na DOM.

OBS: Não deixaria o teste batendo na API real, utilizaria o msw para mockar a chamada à API e retornar os dados mockados.

Espero ter sanado sua dúvida!