Percy

We are in the process of adopting Next.js as our React framework and using Storybook to help build our React components in isolation. This new part of our frontend is written in TypeScript, and we use Emotion for CSS/styling. For delivering data, we use GraphQL and Apollo. Jest, Percy, and Cypress are used for testing.

When I saw the founders of Cypress introduce it in some conference I knew I found the tool we needed to start writing E2E testing. What I like about it is that it provides a comprehensive solution for the whole lifecycle of writing E2E tests for your application, from the API you need to write the tests to showing you why they fail. It's also nice that other tools/services in the testing space, like Percy, integrate with them now.

We use Cypress because it's made browser testing simple and fast. The speed of both writing and executing the tests means that we're able to gain good coverage with minimal effort.

By building out browser tests we've been able to refactor large parts of the application and have a good degree of faith that everything is working. Next step is going to be adding Percy into the mix.

We use Jest because when we rebooted our "front end" stack earlier last year, we need to have a testing solution (we didn't have any front-end tests before that!). Jest is fast and convenient and it has plenty of community support behind it. It let's us run our unit tests with Enzyme and snapshot tests.

This is an area that we are constantly reviewing to see what can be improved, both in terms of developer needs, accuracy, test maintainability, and coverage.

I'm currently exploring using React Storybook to be the record of snapshot tests and using some online services, such as Happo.io and Percy in our CI pipeline.