Technologies

RTL & Jest

Overview

RTL is used as a React rendering engine to render components to the virtual dom and exposes consice API to find and interact with the rendered dom. Automatically handles state updates without having to wrap act(() => {}). Used in tandem with Jest, a testing runner framework that is quick and simple coupled with a great mocking system it allows for great unit tests to be writen and forces you to test functionality over implementation.

React Testing Library

The core library, is a light-weight solution for testing web pages by querying and interacting with DOM nodes (whether simulated with JSDOM/Jest or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you confidence that your application will work when a real user uses it.

What this library is not:

1. A test runner or framework (Jest in our case)
2. Specific to a testing framework

Why?

1. Wildly used and accepted testing library for all major frameworks: Source: State of JS
2. Focuses on testing the core functionality and not implementation details of the code

Caveats

• No shallow rendering: because you interact with the dom vs the actual react components. Learn more

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Why?

1. Most used JS testing framework runner: Source: State of JS
2. Integrates well with VS Code, a nice extension for running tests and visualizing coverage right in the editor
3. Great mocking API's
4. Snapshot testing
5. Recommended by RTL