This project provides a suite of tools, patterns, and best practices for writing comprehensive unit and integration tests in JavaScript and related technologies. It features the use of RenderBuilder for component rendering, PageBuilder for managing HTML elements, a mock server for simulating real API communication, and class builders for creating mock data. The project also introduces the technique of snapshot testing for visual regression alongside the utilization of the jest-text-matrix to handle functionalities that come with a variety of inputs.
Here is a quick run-down of the tools and patterns you can find and explore with our project:
-
RenderBuilder: This tool helps to render components with wrapping components whenever needed. It helps wrap your component in any contexts it depends on and abstract away redundant code.
-
PageBuilder: This tool is designed to hide the mechanical details of finding HTML elements and validating their existence. It simplifies the process of creating page objects and enhances the efficiency in testing.
-
Mock server: Provides an efficient way to simulate API communication for testing purposes. It allows you to mimic the behaviors of an actual server and make adjustments as needed for testing different scenarios.
-
Class Builders for Mock Data: Facilitates creating mock data for tests. Using this pattern makes your unit tests safer, more predictable and easier to read.
-Snapshot Testing: An exceptional approach for performing visual regression testing. It assesses whether the UI output accurately corresponds with the expected output or not.
-
jest-text-matrix: An effective tool for testing functionalities that come with various input combinations. It helps in defining the test cases in a compact and manageable manner.
-
Example tools usage in tests: Example of using the tools
-
Example with "bad" approach: Example of unstructured tests
- start the server:
cd server && yarn && node index.js
- start the app:
yarn dev
- start tests:
yarn test