Test Next.js app with useSWR hook to fetch data from GraphQL server

[masakudamatsu]

Hi. My app is built with Next.js and uses the useSWR hook to fetch data from my own GraphQL server (running on localhost:4000). I want to test if clicking the submit button will show a new element rendered with the fetched data.

I code my test like this (I'm using cypress-testing-library to query for an element):

cy.route2('http://localhost:4000/graphql').as('graphQlServer');

cy.visit('/');

cy.findByRole('button', {name: 'Submit'}).click();

cy.wait('@graphQlServer');

cy.findByTitle('SearchResults');

Even though the App preview does show the fetched data rendered as a new element, the test fails with this error:

Timed out retrying: 
cy.wait() timed out waiting 30000ms for the 1st response to the route: graphQlServer. 
No response ever occurred.

I’ve been searching for a solution with Google but I cannot find any. Does anyone have an idea to make this test work?

[bahmutov]

Please set up a repo with reproduction we can run. I have tested SWR hook in https://github.com/bahmutov/test-swr but as a component test.

[masakudamatsu]

Thank you for your reply, @bahmutov! I've created a branch called #151-cy.route2 of my repo so you can reproduce the issue.
https://github.com/masakudamatsu/equiluminant-color-picker/tree/%23151-cy.route2

The failed test code is app/__cypress__/e2e/userInputs.js.

Let me know if anything is unclear.

[Samuel-Torres]

I'm running into a similar issue on my end here on a personal project. Were you able to find a fix. For me it's happening on a component test.

[Samuel-Torres]

I was somewhat able to find a fix for this by passing in axios as a second property in the useSWR hook.