Frontend Testing Cheatsheet
Last updated by Noel Varanda (opens in a new tab),
Testing
Cheatsheet
The testing cheatsheet provides a concise and organized reference for frontend testing, covering essential testing techniques, appropriate testing tools, and what to test for different elements of a frontend application.
Glossary
Before we begin, a couple of essentials to understand:
| Term | Definition |
|---|---|
| App Widget | A domain-specific component which probably doesn't get re-used a lot throughout the application; perhaps it appears only once. It has a lot of context, possibly uses routers or stores. A specific component of a frontend application that requires a lot of information from the environment and operates in multiple scenarios. E.g. A page, or a dashboard wrapper. |
| UI Building Block | A reusable and parametric component that can be composed into the UI in multiple situations and does not require a lot from the environment (context, routes, or store). E.g. A button, search bar, or date picker. |
| Critical Path | A user flow you need to work. What will the sales person put in front of the client? What can absolutely not break? |
Functional Testing
The following table consists of the essential tests to have in a projects.
| Element | Appropriate Testing Techniques | Testing Tools | What to Test |
|---|---|---|---|
| UI Building Blocks | Unit Testing | - Jest (opens in a new tab) - React Testing Library (opens in a new tab) | - Test component behavior and interactions. - Verify component state changes and updates. |
| Visual Regression Testing | - Storybook Visual Testing (opens in a new tab) | - CI should check if component renders correctly. | |
| App Widgets | UI Integration Testing | - Jest (opens in a new tab) - React Testing Library (opens in a new tab) | - Test widget behavior and interactions. - Validate the flow and navigation within the application. |
| Critical paths | End-to-End Testing | - Cypress (opens in a new tab) | - Test the critical user paths from start to finish. |
| Utility Functions | Unit Testing | - Jest (opens in a new tab) | - Test input/output behavior and edge cases. - Verify the correctness of utility functions. - Ensure error handling and exception scenarios are handled properly. |
Optional
The following are considered less important optional tests for testing the behaviour of applications as by testing the above, these bits should be implicitly tested too.
| Element | Appropriate Testing Techniques | Testing Tools | What to Test |
|---|---|---|---|
| Redux | Unit Testing | - Test actions and verify state. | - Test actions and verify state. |
| Hooks | Unit Testing | - Test actions and verify state. | - Test hook behavior and interactions. |
Non-Functional Testing
| Attribute | Appropriate Testing Techniques | Testing Tools | What to Test |
|---|---|---|---|
| Performance | Performance profiling | <Profiler /> (opens in a new tab) component | Measure rendering performance of a React tree programmatically. |
| Cross Browser Compatibility | Compatibility testing | Cypress (opens in a new tab) | Test the application on different browsers and browser versions. |
| A11y | Linting | eslint-plugin-jsx-a11y (opens in a new tab) | Follow the setup guide. |
| Error reporting | @axe-core/react (opens in a new tab) | Follow the setup guide. |
Keep up to date with any latest changes or announcements by subscribing to the newsletter below.