Reassure

Performance testing companion for React and React Native

TestingPerformanceReact Native
callstack/reassurecallstack.github.io/reassure/reassure

README

Reassure

Performance testing companion for React and React Native.

Callstack x EntainCallstack x Entain

Read The Docs


The problem


You want your React Native app to perform well and fast at all times. As a part of this goal, you profile the app, observe render patterns, apply memoization in the right places, etc. But it's all manual and too easy to unintentionally introduce performance regressions that would only get caught during QA or worse, by your users.

This solution


Reassure allows you to automate React Native app performance regression testing on CI or a local machine. In the same way, you write your integration and unit tests that automatically verify that your app is still _working correctly_, you can write performance tests that verify that your app is still _working performantly_.

You can think about it as a React performance testing library. In fact, Reassure is designed to reuse as much of your React Native Testing Library tests and setup as possible.

Reassure works by measuring render characteristics – duration and count – of the testing scenario you provide and comparing that to the stable version. It repeats the scenario multiple times to reduce the impact of random variations in render times caused by the runtime environment. Then, it applies statistical analysis to determine whether the code changes are statistically significant. As a result, it generates a human-readable report summarizing the results and displays it on the CI or as a comment to your pull request.

In addition to measuring component render times it can also measure execution of regular JavaScript functions.

Installation and setup


To install Reassure, run the following command in your app folder:

Using yarn

  1. ```sh
  2. yarn add --dev reassure
  3. ```

Using npm

  1. ```sh
  2. npm install --save-dev reassure
  3. ```

You will also need a working Jest setup as well as one of either React Native Testing Library or React Testing Library.

You can check our example projects:

- React Native (CLI)
- React Native (Expo)
- React (Next.js)
- React (Vite)

Reassure will try to detect which Testing Library you have installed. If both React Native Testing Library and React Testing Library are present, it will warn you about that and give precedence to React Native Testing Library. You can explicitly specify Testing Library to be used by using [configure](#configure-function) option:

  1. ```ts
  2. configure({ testingLibrary: 'react-native' });
  3. // or
  4. configure({ testingLibrary: 'react' });
  5. ```

You should set it in your Jest setup file, and you can override it in particular test files if needed.

Writing your first test


Now that the library is installed, you can write your first test scenario in a file with .perf-test.js/.perf-test.tsx extension:

  1. ```ts
  2. // ComponentUnderTest.perf-test.tsx
  3. import { measureRenders } from 'reassure';
  4. import { ComponentUnderTest } from './ComponentUnderTest';

  6. test('Simple test', async () => {
  7.   await measureRenders(<ComponentUnderTest />);
  8. });
  9. ```

This test will measure render times of ComponentUnderTest during mounting and resulting sync effects.

Note: Reassure will automatically match test filenames using Jest's --testMatch option with value `"<rootDir>/*/.perf-test.[jt]s?(x)". However, if you want to pass a custom --testMatch option, you may add it to the reassure measure script to pass your own glob. More about --testMatch` in Jest docs