2
votes

Cyprès ne correspond pas aux itinéraires

J'essaie d'écrire un test de cyprès qui émule une API lente, donc après avoir lu une documentation, j'ai trouvé ceci:

before(function() {
    cy.server({delay: 5000});
});

beforeEach(() => {
    cy.route({
        method: "GET",
        url: "**/api/**"
    });
    cy.visit("http://localhost:9000");
});

Cela devrait ajouter un délai de 5 secondes à toutes les demandes à API , n'est-ce pas?

Le problème que je vois est qu'elle ne correspond à aucune requête même s'il y a beaucoup d'appels à * / api / * code>. L'interface graphique de cyprès voit cependant la route ... elle ne correspond tout simplement pas.

Quelle pourrait en être la cause?

cypress mocking testing

2 commentaires

Lorsque vous exécutez le test, vous devriez voir dans l'interface graphique la route réelle, ce que je fais normalement est de copier cette route en tant que matcher et cela fonctionne.

@munHunger Avez-vous déjà résolu ce problème?

4 Réponses :

-1
votes

Je suppose que votre correcteur ne fonctionne pas et que votre requête ne dit pas (XHR STUB)

Si vous utilisez l'interface graphique, vous devriez voir une requête qui ressemblera à ceci

(XHR) OBTENEZ 200 / VOTRE_API / VOTRE_ROUTE

copiez ça (/ YOUR_API / YOUR_ROUTE) et cela devrait correspondre

si devrait dire (XHR STUB) après l'avoir stub

0 commentaires

4
votes

Si vous insérez l'itinéraire entier, tel qu'il apparaît dans le journal du cyprès, vous constaterez probablement que cela fonctionne.

Il semble que le globbing anticipé ne soit pas très bien implémenté par minimatch. Il délimite bien sur le caractère / mais pas très bien sur ? ou # , donc si vous essayez d'accueillir les chaînes de requête, c'est probablement là où vous venez de décoller.

Vous pouvez utiliser Cypress.minimatch dans la console pour voir ce qui se passe. Plus d'informations sur la façon de procéder dans la documentation .

Cypress acceptera également les expressions régulières. Quelque chose comme / \ / api \ // devrait fonctionner pour vous.

2 commentaires

Je suis d'accord avec vous pour dire que cela devrait fonctionner, mais ce n'est pas le cas pour une raison quelconque. J'ai essayé à la fois avec regex et en ajoutant une URL absolue, mais rien ne fonctionne

Pouvez-vous donner un exemple du type d'URL que vous essayez de faire correspondre?

1
votes

Faites-vous une requête XHR directe ou utilisez-vous fetch ? Le stubbing / mocking du réseau Cypress uniquement fonctionne avec les requêtes XHR réelles (l'extraction est son propre type de requête).

Il y a un problème ouvert (3 ans et plus) à ce sujet, et enterré il y a un excellent lien vers certains solutions , y compris celle ci-dessous, qui fonctionne à merveille.

EDIT: Vous pouvez également utiliser axios pour vos requêtes HTTP, qui envoie des requêtes XHR réelles au lieu de requêtes de récupération, donc pas de Cypress config est nécessaire. Je pense que le code résultant est également plus propre.

  let polyfill;

  // grab fetch polyfill from remote URL, could be also from a local package
  before(() => {
    const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js'
    cy.request(polyfillUrl)
      .then((response) => {
        polyfill = response.body
      })
  })

  beforeEach(() => {
    cy.visit('/', {
      onBeforeLoad (win) {
        delete win.fetch
        // since the application code does not ship with a polyfill
        // load a polyfilled "fetch" from the test
        win.eval(polyfill)
        win.fetch = win.unfetch
      },
    })
  });

1 commentaires

Je ne sais pas pourquoi ce vote a été rejeté. Pour ceux d'entre nous qui ne savent pas que Cypress ne se moque pas de la récupération native (uniquement XHR), cette petite aide est un don de Dieu!

1
votes

Pour moi, mon modèle était correct pour ma requête POST, mais le problème était que je ne remplaçais pas la réponse par défaut. J'espérais juste que l'API renverrait une erreur 500, mais à moins que je ne spécifie une réponse, elle appelait le vrai point de terminaison de l'API. La documentation indique que la réponse par défaut est un objet vide, mais pour une raison quelconque, elle appelle à moins que je ne fournisse une valeur. Une fois que j'ai fourni la réponse, l'interface graphique de Cypress a indiqué qu'elle bloquait correctement l'appel.

Changement de:

cy.route({
    method: "POST",
    url: /my-endpoint/,
    response: {},
    status: 500,
});

cy.route({
    method: "POST",
    url: /my-endpoint/,
    status: 500,
});

est ce qui a fonctionné pour moi.

0 commentaires