0

I'm using Cypress for its component tests. These are integration-style tests, I mount my whole app (React) and then click through it. All API calls are mocked using the Cypress Intercept feature. So far this has been an incredibly powerful solution, far more robust than any other FE testing suite I've worked with.

One limitation I've run into is with the intercepted API calls. I've got this scenario where I've got an API that is called twice during the flow of a given test. One of the conditions I want to validate is that it is, indeed, called twice, as the second call is triggered by the logic I am testing.

So the specific Cypress validation I want to work is this:

cy.get('#myButton').click(); // Triggers the second API call
cy.get('@myApi.all').should('have.length', 2);

Now, the problem is that the above code, on its own, fails because Cypress only registers a single call to the intercepted API named myApi. The reason for this is Cypress moves to immediately validate the number of calls to this intercepted API, rather than waiting for the action I just triggered in the UI.

The only way I know of to make the above code work is to add in explicit waiting, like this:

cy.get('#myButton').click(); // Triggers the second API call
cy.wait(300);
cy.get('@myApi.all').should('have.length', 2);

Because I am explicitly waiting 300ms after clicking the button, enough time passes for the second API call to occur and Cypress to register it, so the test passes.

I don't like this solution. I don't like adding explicit waits to my test code, it feels like a band-aid and will likely be error prone as it relies on execution timing to succeed. However, I simply do not know of a better option.

halfer
  • 19,824
  • 17
  • 99
  • 186
craigmiller160
  • 5,751
  • 9
  • 41
  • 75

3 Answers3

6

That's almost right but instead of cy.wait(300) use cy.wait('@myApi') - because cy.get('@myApi') is non-waiting.

cy.get('#myButton').click()
cy.wait('@myApi')
cy.get('@myApi.all').should('have.length', 2)
Klea
  • 169
  • 7
  • This doesn't work, I've tried it. The reason it fails is that cy.wait('@myApi') will return as long as at least one request has been intercepted by @myApi. This means that it will not wait for the second request to go through. – craigmiller160 Nov 23 '22 at 13:37
  • 3
    It's easy, you would wait for the first call as well. – Yolandi Nov 23 '22 at 19:34
2

I'd suggest you don't use cy.get('@myApi.all') as it's undocumented.

With intercept there are many ways to use javascript in a straight-forward way, here is an example from the docs.

it('makes 3 calls', () => {
  let count = 0
  cy.intercept('/favorite-fruits', () => {
    // we are not changing the request or response here
    // just counting the matched calls
    count += 1
  })
  cy.visit('/fruits.html')
  // ensure the fruits are loaded
  cy.get('.favorite-fruits li').should('have.length', 5)

  cy.reload()
  cy.get('.favorite-fruits li').should('have.length', 5)

  cy.reload()
  cy.get('.favorite-fruits li').should('have.length', 5)
    .then(() => {
      // by now the count should have been updated
      expect(count, 'network calls to fetch fruits').to.equal(3)
    })
})
Alcock
  • 160
  • 7
  • This is POSSIBLY something I can pursue. I'm doing more than just counting calls, I'm returning fixtures or other, more complex responses, in some of these intercepts. I've also got them all configured as re-usable functions, rather than defining them explicitly within the test. Nevertheless, this is a potential solution I will consider. – craigmiller160 Nov 23 '22 at 13:38
0

You can use cy.get('@myApi.all') but you'll have to be careful with using .all as it will only check the matching intercepts at that moment. So you would have to ensure both calls have been triggered by then.

Similar to this answer, Cypress comes bundled with Sinon-chai. You'll spy/stub and alias, trigger the first call and check the alias it was called once, wait until the second call is trigger by your app to check on the second call.

// spy/stub with alias your reach component call

cy.get('#myButton').click(); // Triggers the second API call
cy.get('@myApi').should('have.been.calledOnce')
// wait for your app to trigger the call
cy.get('@myApi').should('have.been.calledTwice')
jjhelguero
  • 2,281
  • 5
  • 13