Why does running Cypress on a React/GraphQL app return network errors when normal browsing doesn't?

Question

I have a React/apollo client and an apollo/neo4j backend application based on GRANDStack. My React app runs on localhost:3000 and my GraphQL on localhost:4001/graphql, and they communicate without fail. All is working well in the app (with CORS enabled), but I wanted to implement testing with Cypress.

Should I expect Cypress to be able to observe the flow between React and GraphQL without error? Or is this beyond its capability?

What I've tried: I set up Cypress and ran the following test:

it("Opens myPlan.", function() {
    cy.visit("localhost:3000/myPlan");
    cy.wait(6000);
});

At first cypress setup, my site loaded. One of the first things that the app does is graphql query a few values, and create a dropdown box based on those values. While this and all other graphql requests work fine in the browser, I get "{"graphQLErrors":[],"networkError":{"name":"ServerParseError","response":{},"statusCode":404,"bodyText":""},"message":"Network error: Unexpected end of JSON input"}" errors in cypress for the same code.

Presumably, the problem was because there are 2 endpoints, and cy.visit only allows one. I tried disabled ChromeWebSecurity and tried an "Access-Control-Allow-Origin-master" plugin.

Edit: I found someone that knew Cypress, and they suggested adding:

"proxy": "http://localhost:4001/",

to my react client config. This avoids the multi-port issues, and Cypress works.

You are required to post a minimal reproducible example here, within your question, and not a link to any third party site. — Rob
Hmm, to be fair, this is not a question primarily about code, but about capabilities of Cypress handling a site over 2 ports. Maybe I could reword it in that way. A minimally reproduce-able config of GRANDstack would be pages and pages of code, but that gives me the idea to test this on a vanilla GRANDstack template and work backwards. — Matthew
Do not put "Solved" in the title. Answers should not be part of the question. Instead, put the solution as an answer to your own question. — Rob

Matthew Matthew · Accepted Answer · 2020-03-18T11:12:08

Edit: I found someone that knew Cypress, and they suggested adding:

"proxy": "http://localhost:4001/",

to my react client config. This avoids the multi-port issues, and Cypress works.

Why does running Cypress on a React/GraphQL app return network errors when normal browsing doesn't?

1 Answers