Testing a React App in Chrome with Heroku CI

Summary

The article presents a walkthrough for automating end-to-end browser tests for a React application in Heroku CI rather than relying on manual local testing. The sample app uses Jest and Puppeteer to check navigation to Puppeteer Documentation, retention of text entered into a form, and the greeting shown after submission, with headless Chrome supplied by the Chrome for Testing Heroku Buildpack. Local execution initially exposes a mismatch between the expected and received greeting, then passes after the application is fixed; a streamlined command starts the server and runs the suite. Heroku CI is configured with an app.json file containing Chrome for Testing and Node.js buildpacks, plus a test script that runs start-server-and-test and the Jest/Puppeteer tests. Pushes to the connected GitHub repository trigger the suite.

Takeaways

1. 1

   Puppeteer tests verify external-link navigation, retained input values, and the greeting rendered after form submission.

2. 2

   The local suite first fails because the expected greeting differs from the received text, then passes after the application is fixed.

3. 3

   Heroku CI installs Chrome through the Chrome for Testing buildpack and runs the React end-to-end suite when changes are pushed to the connected GitHub repository.