Check React Project Compilation Status in different environments - Free Tool
Tags: tools, opensource, appseed
Published: 2022-09-29 14:25:57

---
title: Check React Project Compilation Status in different environments - Free Tool
published: true
description: Open-source developer tool that provides a simple way to ensure compatibility of React Projects across different Node environments using Yarn or NPM using GitHub Actions.
tags: tools, opensource, appseed
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rooq5ie7riewg4shzhp9.jpg
canonical_url: https://blog.appseed.us/test-react-projects-in-different-environments/
---
Hello Coders!

This article presents a [free tool](https://blog.appseed.us/test-react-projects-in-different-environments/) built on top of GitHub Actions that checks the compilation status of a **React Project** using different NodeJs versions, and builders (Yarn, NPM). The tool accepts as input a list of external React projects and for each one, a build is executed under the GitHub Actions. In the end, for each build a report file plus a screenshot if the build was successful.  Thanks for reading!

- 👉 [DevTool UI Tester](https://github.com/app-generator/devtool-ui-tester) - source code
- 👉 [DevTool UI Tester](https://www.youtube.com/watch?v=IfGmhNna6zE) - video presentation (yTube)

{% embed https://www.youtube.com/watch?v=IfGmhNna6zE %}

---

## ✨ How it works

This simple tool might be useful when we need o check if a React Project can be used in a specific environment like Node 12.x and Yarn or Node 18.x and NPM. Here is the input expected by this GitHub Actions Wrapper:

- The list of React Projects to test: [repositories.json](https://github.com/app-generator/devtool-ui-tester/blob/main/repositories.json)
- The [NodeJS versions](https://github.com/app-generator/devtool-ui-tester/blob/07a0e0fa61fa6a34d666962fb2ce580c4ed49a63/.github/workflows/compatibility.yaml#L18) to be used during tests
- [Compiler](https://github.com/app-generator/devtool-ui-tester/blob/07a0e0fa61fa6a34d666962fb2ce580c4ed49a63/report-test-build.sh#L37): Yarn, NPM or both

Once all the information is saved and committed, GitHub triggers a build matrix and the tool is able to extract a report for each build. For instance, if we specify two React kits to be tested, NodeJS 16.x and Yarn as the compiler, the tool executes 2 tests:

- **Test #1**: React Kit 1, using Node 16.x and Yarn
- **Test #2**: React Kit 2, using Node 16.x and Yarn

The order cannot be controlled because GitHub uses a separate thread for each test.

---

## ✨ The Output

When GitHub detects the commit, the build flow is launched for each item in the testing matrix. Below are the screenshots and testing logs for [React Horizon UI](https://github.com/app-generator/react-horizon-ui-chakra), an open-source kit tested with Node 16 and Yarn.

---

> **GitHub Actions** - Test page   

![GitHub Actions - Workflow Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j14zqsu48ivenxr1ko9l.png)

---

> **GitHub Actions** - Runtime Page

![GitHub Actions - Runtime Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km1k4robpvv1xp3bspyq.png)

---

Once the test is finished, a `report.zip` artifact is provided with two files:

- A Log file with a status code for each step
- Application screenshot if the build was successful

The name of the report file merges the context of the test using all contexts: the name of the kit, the builder used (Yarn in this case), the node version, and execution status.

This small improvement might be used when we have many tests and the success rate can be determined by counting the files that end in `STATUS_OK`.  

![GitHub Actions - Test Reports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pkgvzh1nijgdzgn0ugf.png)

---

**Thanks for reading!** in case anyone finds this tool useful, feel free to use it (the license is MIT) and ask for support (if necessary). For more tools and starters feel free to access:

- 👉 [Tools for Developers](https://medium.com/@appseed.us/tools-for-developers-curated-list-b39709ed16f4) — Curated List
- 👉 Ask for [support](https://appseed.us/support/) or download [free starters](https://appseed.us/apps/open-source/)