Integration tests with GraphQL, Cypress and CircleCI
Recently at S19 we were faced with the task of introducing integration tests to our GraphQL layer. Why you ask!? Well we already had unit tests in place for the resolvers in the form of Jest however we required assurances that our separate queries to the back-end server were in fact working as expected and returning something (hopefully data).
In the search for a viable all-in-one solution, a delightful test runner called Cypress was discovered. If you’ve not heard of it please check out their site and watch the introduction video which covers everything for setting up, writing, running and recording tests. The ability to record screenshots and videos for future tests after the initial iteration made it a clear winner.
The plan was to set up our Cypress testing environment and spec tests based on the GraphQL schemas already in place which in turn were handled by our unit tested resolvers that pointed at our back-end API’s.
Ok let’s get down to business…
After the initial installation I started by setting up the appropriate environment variables for my spec files via the handy plugins folder which pointed at my CircleCI env file.
Next I created two custom Cypress commands, one to fetch the appropriate auth token and another to make the POST response to my GraphQL server (localhost).
Then I set about creating my tests per GraphQL schema.
You’ll notice I’m not using the Cypress get selector for the response, due to our prettier/linting rules unnamed functions are a no-no so I’m falling back to let.
With the tests in place it was time to introduce Cypress into our CI pipeline. I created a new job in the config file which allowed the tests to run every-time code is committed to our Github repo.
Via the CircleCI dashboard I set up a new environment variable matching the new host.
GQL_SERVER_ROOT: http://integration.gql-dev.com/5000As part of the npm cypress:run command I attached a key flag that references my Cypress dashboard account giving testers the ability to monitor future test data as well as upload screenshots and videos.
"cypress:run": "$(npm bin)/cypress run --record --key {key}",VOILA!
And via the Cypress dashboard…
Why you should write tests — https://medium.com/stratajet-tech/why-should-you-write-tests-910a3175d33c
Writing your first test with Cypress — https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Add-a-test-file
A solution for stubbing GraphQL requests — https://github.com/cypress-io/cypress-documentation/issues/122
