Frontend web applications are very crucial part of any software system. That is where users interact with our system. Therefore it is important that we test our frontend application code before and after deployment.

Intention of this post is to provide an overview to different types of Frontend Tests by covering

• An introduction to different types of Frontend Tests
• Where each tests belong in software development cycle
• Scope of each tests
• Technologies and libraries that can be used in each tests

Also this post is written with the context of a ReactJS application, but overall concepts explained in this post can be easily applicable for any Frontend project.

So Let's Get Started...!

Introduction to Frontend Tests

Below visualization shows the types of testing that we are going to discuss today and where each tests belong in the development and deployment cycle.

Before we go further, Lets remind ourself about two types of components that we see in Component based Frontend Project.

• Dumb/Static Components - Components that ONLY uses props to communicate with external world. Normally these components are the leaf components in our component tree.
• Smart/Container Components - These components use Dumb/Static components to make a more opinionated user experience. They communicate with external world in different ways including fetch APIs, mutating global state of the application and reacts to global state changes. Custom Hooks that we write normally goes into this category.

Following diagram summarize what we just talked.

Now let's go in details of each test types

Unit Tests

Unit Tests are the most famous type of developer testing type. It tests each unit or component in our frontend application in isolation. If we think of our component tree, unit tests cover our list of Dumb/Static Components

Technologies can be used

• Jest - https://jestjs.io/ (Javascript Testing Framework and Runner)
• React Testing Library - https://testing-library.com/docs/react-testing-library/intro/

Component Tests

We can identify this type as a variant of Unit Tests that specialized in testing Smart Components. Since Smart Components communicate with external world in different ways, it is important to mock these communication channels and external boundaries, so that we can test these Components in isolation.

Technologies can be used

• Jest - https://jestjs.io/ (Javascript Testing Framework and Runner)
• React Testing Library - https://testing-library.com/docs/react-testing-library/intro/
• Mock Service Worker - https://mswjs.io/ (Mocking the API Responses in the browser without creating a separate mock server)
• Cypress Component Testing - https://docs.cypress.io/guides/component-testing/overview

Snapshot Tests

Our components changes frequently. But as developers, sometimes we only updates the component logic which does not change how the component renders on the page. Snapshot Tests make sure visualization of the component does not change unexpectedly.

Technologies can be used

• Jest - https://jestjs.io/docs/snapshot-testing (Javascript Testing Framework and Runner)
• React Testing Library - https://testing-library.com/docs/react-testing-library/intro/
• Storybook Snapshot Testing - https://storybook.js.org/docs/writing-tests/snapshot-testing

Component Level Accessibility Tests

Accessibility tests are very important to make sure the application we build is accessible for all types of users. Normally Accessibility Tests are done manually by Accessibility Testing Experts, but there are very powerful libraries that capable of catching some obvious accessibility issues in the early stage of development cycle.

Technologies can be used

• Jest - https://jestjs.io/ (Javascript Testing Framework and Runner)
• React Testing Library - https://testing-library.com/docs/react-testing-library/intro/
• Axe Tools - https://www.deque.com/axe/devtools/web-accessibility/ (Provides React SDK that tests for accessibility issues in component rendering)
• StoryBook - https://storybook.js.org/docs/writing-tests/accessibility-testing

Contract Testing

Most Frontend Application requires a Backend API Server to fetch data. Contract Testing helps us to make sure the API contract between the Frontend Application and the Backend API Server (i.e API Request and Response) is valid and no compatibility issues after deploy.

If we follow Consumer Driven Contact Testing (See this playlist for more info) we can achieve following

• The new version of Frontend Application that is about to get deploy is compatible with the backend API server that is already deployed.
• If you are about to deploy a new version of backend API server, we can make sure we are not breaking current version of the Frontend Application that is already deployed.

Post Deployment Testing

Most of the post deployment testing types including End-to-End Tests, Accessibility Tests and Performance Tests simulate the loading of the application in a web browser and trigger user interactions as an actual user would do in the application.

End-to-End Tests

End-to-End Tests automatically loads the web application in the browser and simulates the user activities. For example test script would find a button in the browser and click on that and waits, similar to how actual user would do. Then our web application runs its logic, call an API server and gets all the data and display accordingly. Then test script assert the rendered data as it intends to show it to the user.

Normally these test scripts are align with user stories and can be written in gherkin format as well.

https://dev.to/pahanperera/gherkin-style-e2e-tests-for-a-web-application-using-cucumberjs-4djl

Technologies can be used,

• Cypress - https://docs.cypress.io/guides/overview/why-cypress
• Selenium - https://www.selenium.dev/documentation/overview/ (End-to-End Test Runner)

Accessibility Tests

Similar to End-to-End Tests, Accessibility tests also automatically loads the web application in the instrumented/simulated web browser and check for the visual output of the final rendered web application.

These tests covers

• Evaluating page structure, color contrast, form labels, and multimedia alternatives
• Validating Screen Readers
• Keyboard only navigation

Technologies can be used,

• Axe Tools - https://www.deque.com/axe/devtools/web-accessibility/

https://www.applause.com/blog/accessibility-testing-what-you-should-know/

Performance Tests

Performance Tests determines the quality of the web application and generate reports/audits for performance, accessibility, progressive web apps, SEO, and more.

Technologies can be used,

• Google Lighthouse - https://developer.chrome.com/docs/lighthouse/overview

Based on the nature of our frontend application, we may need to focus more on getting certain metrics right, rather than trying get everything.

Conclusion

There are lot of other Frontend tests types that are not mentioned in this post and depending on the nature of the project we have to decide what are the types of testing are best fit for our frontend application.

I hope this post gave you an idea of what types of Frontend test that you can do to make sure you deliver an quality product to your customers.

❤️ Appreciate your feedback and thank you very much for reading.