Hi all! This is my first time using cypress, and I'm getting hung up on an e2e test. Essentially, I have defined a command with an intercept to respond with JSON data I added to a fixture. I confirmed that I have a 200 response, and the body of the response deeply equals the fixture within a

.wait()

. After those tests pass, my UI seems to get stuck in what looks like an in between state. My intuition tells me that this is an issue stemming from the asynchronous

.wait()

. However, I do have loading skeletons and a spinner that renders while waiting for data, perhaps that is the issue? The question: Is there a way I can get my UI to update with the stubbed data that I'm missing? I've been digging trough the docs and chatGPT, and It just seems like I have things tied up the way I should. Thanks in advance for any help! Repo: https://github.com/cameronRomo/GameStack/tree/feature/filter-games First screenshot shows the problem, second shows app working without stub.

this code? What exactly is the problem, because it is hard to say from your spec (but i will wait for your answer)

Yeah, I'm failing on line 28. I'm expecting my app to load components containing stubbed data, but the parts of the document containing that data appear to be blank. I feel like there's just something I'm missing, as I am still really new to this testing framework.

so one can simply clone the repo and run it to see the failure?

Yeah, go ahead and fork it if you wish! There's no README, but assuming you have TypesScript installed, you should just be able to run

npm i

and run it locally. It's currently set up to run on

http://localhost:5173/

and this is the problem?

No, sorry, you'll need to get an API key from here: https://rawg.io/apidocs and add it as an environment variable.

I will just use https://github.com/bahmutov/as-a

Oh, that's a cool package! Nice to know it's there. Yeah, basically all the functionality for getting the data seems to be working, I'm just stuck trying to see if I can get data to load on the UI.

ughh, i think the intercept gets confused by the two requests for each api and I think this is related to CORS

Ah! That does make sense. Gosh that's a bummer. Perhaps the way around it is to make a proxy?

ok, it was much simpler than that. Your fixtures are incorrect - this is not the object expected by the app. You need an object with key "results" etc like this

{
  "results": [
    {
      "id": 1,
      "name": "The Witcher 3: Wild Hunt",
      "background_image": "https://media.rawg.io/media/crop/600/400/games/618/618c2031a07bbff6b4f611f10b6bcdbc.jpg",
      "parent_platforms": [],
      "metacritic": "92"
    },
    {
      "id": 2,
      "name": "BioShock Infinite",
      "background_image": "https://media.rawg.io/media/crop/600/400/games/fc1/fc1307a2774506b5bd65d7e8424664a7.jpg",
      "parent_platforms": [],
      "metacritic": "94"
    }
  ]
}

even then the platform ids do not match for me, and the background images are not found, so something funky is going on with that api. You can see missing data if right now you pause debugger in this code in useData hook

setLoading(true);
      apiClient
        .get<FetchResponse<T>>(endpoint, {
          signal: controller.signal,
          ...requestConfig,
        })
        .then((res) => {
          setData(res.data.results);
          setLoading(false);
        })
        .catch((err) => {
          if (err instanceof CanceledError) return;
          setError(err.message);
          setLoading(false);
        });

Nice catch! I made the adjustments and everything is passing now, and the ui is updating with data. Apart from the image 🤔 I'll see if there's something in that hook that's causing it. Much thanks!!

Nice, and if you are new to Cypress going through a course makes sense. There are on.cypress.io/courses and i have a bunch too https://cypress.tips/courses