Run integration tests with GitHub Actions(React + TestCafe)

A while ago I was setting up integration testing at work for a react app, since we were using GitHub actions to run unit tests it make sense to use the same setup for Integration tests as well. We decided to use the TestCafe to write those tests. This is going to be a very short article about how to run Integration tests for ReactApp with GitHub Actions. If you are interested in learning more about TestCafe and integration tests this article is a good read.

Process:
1. Create a React App
2. Write some tests with TestCafe
3. Create GitHub actions that will:
— 1. Listen for push events to the repo and trigger the tests
— 2. It will first Install dependencies and build the app
— 3. Then start the app inside container(eg localhost:5000)
— 4. Finally Run integration tests and report the results

Step1:
We will be using this existing react app that has some tests already written in it. So first step would be fork the app into your own GitHub repo and clone it to local machine.

Step2:
This step is to make sure tests are running fine locally
- Install dependenciesnpm install
- Build the app npm run build
- Add two new scripts inside package.json to run tests locally and on GitHub actions as follow as.

First script will open chrome browser, run tests and close it. Second script is to run tests on GitHub, it will run tests inside headless chrome browser.
Run npm run e2e and if everything goes smooth you will see all tests green.

Step3:
It’s time to create GitHub actions and run tests on every push. Create GitHub actions as follow as inside .github/main.workflow

That’s all you need! Commit the changes, push it to repo and open GitHub actions tab to see test status.

There are 3 actions inside main.workflow

1. First action install all the dependencies, it uses actions/npm@master container that comes with node/npm pre installed.
2. Second action just build the app.
3. Third action runs the test, it uses docker image docker://circleci/node:8-browsers that comes with browsers installed. TestCafe requires a h̵e̵a̵d̵l̵e̵s̵s̵ browser to run.

Conclusion:

This guide provide very basic intro for setting up GitHub actions. Thing that I like most about GitHub action is it is fairly easy to setup, everything is at one place and you can use any docker image! For this project we are using an image from CircleCI :)

I hope you learn something new here. Final version of code is available here on GitHub.