Testing Modern Web Applications Written in TypeScript and React

Testing is a software practice to elicit the presence of potential bugs in an application before it is made live or before the code is promoted into the production environment. In case of web applications, and in particular for the frontend side, a plethora of different technologies and frameworks are available for different testing purposes such as Unit tests, UI tests, and Integration tests, each one supporting different testing features such as assertions, hooks, mocks, spies and stubs. It remains unclear, for a newly created project, which frontend testing frameworks should be preferred and why.

In the first part of this project, we surveyed 8 of the most popular web application frontend testing frameworks: Mocha, Jest, Enzyme, Cypress, Karma, Storybook, AVA, Jasmine, and Enzyme. After comparing and contrasting their capabilities, features, and functionalities, and by taking into account the characteristics of the applications we are going to test, we selected Cypress as our testing technology.

In the second part, we used Cypress to test a real modern web application written in React and Typescript with the aim to expose real bugs and issues. We managed to write over 50 tests, that revealed 6 previously unknown bugs. As a further case study, we tested the popular Blueprint platform, which is a React based UI toolkit developed at Palantir technologies. We were able to replicate three previously known bugs and we found an additional, unknown bug.