---
title: "Testing a React App in Chrome with Heroku CI"
description: "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."
---

# Testing a React App in Chrome with Heroku CI

[Heroku](https://yomu.fyi/company/heroku) · Julián Duque · Sep 24, 2024

**Type:** Tutorial

## 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.

## Context

Manual browser testing can be helpful locally but is described as inefficient and unreliable as an application becomes more complex. The goal is to automate end-to-end checks of the user experience and integrate them into a CI pipeline so code changes receive immediate test feedback.

## Approach / What changed

The walkthrough uses Jest and Puppeteer with headless Chrome to test a React app’s link navigation, text input, and form submission. Heroku CI is configured through app.json with the Chrome for Testing and Node.js buildpacks, and its test command runs start-server-and-test followed by the Jest/Puppeteer suite.

## Takeaways

- Puppeteer tests verify external-link navigation, retained input values, and the greeting rendered after form submission.
- The local suite first fails because the expected greeting differs from the received text, then passes after the application is fixed.
- 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.

**Tags:** [CI/CD](https://yomu.fyi/topic/ci-cd), [Heroku](https://yomu.fyi/topic/heroku), [React](https://yomu.fyi/topic/react), [Testing](https://yomu.fyi/topic/testing)

- Source: [Heroku](https://www.heroku.com/blog/testing-react-app-chrome-heroku-ci)
- Source URL: https://www.heroku.com/blog/testing-react-app-chrome-heroku-ci
- Ingested by Yomu: 2026-09-10T00:04:15.092Z

[Read original post](https://www.heroku.com/blog/testing-react-app-chrome-heroku-ci)