Jest + React Testing Library Setup

Jest + React Testing Library Setup

Debug flaky and failing Jest + React Testing Library tests directly from CI environments. Use the time-travel debugger along with visual preview and DOM snapshots of your virtual DOM.


Install the jest plugin into your jest project.

npm install -D @deploysentinel/jest-rtl-debugger


Add Environment

In your jest config file (ex. jest.config.js) add:
(currently, only jest version 27, 28 and 29 are supported)

module.exports = {
  testEnvironment: '@deploysentinel/jest-rtl-debugger/environment',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.js'],
  globalSetup: '@deploysentinel/jest-rtl-debugger/globalSetup', // optional

Add Setup file

In your setup file (ex. setup-jest.js) add:

const setup = require('@deploysentinel/jest-rtl-debugger/setup');

Configure jest's transform to transform CSS

In your jest config file (ex. jest.config.js) add:

module.exports = {
  transform: {

Add API Key

Lastly, export your API key to an OS environment variable DEPLOYSENTINEL_API_KEY You can grab your API key by logging into (opens in a new tab)/signing up for (opens in a new tab) DeploySentinel and visiting your profile page: (opens in a new tab).


Upload Test Artifacts On Passes

By default, the debugger only uploads failed tests artifacts. You can force artifacts upload by setting DEPLOYSENTINEL_UPLOAD_ON_PASSES environment variable to 1, yes or true

DEPLOYSENTINEL_UPLOAD_ON_PASSES=1 ('1', 'yes' or 'true')


You can set DEPLOYSENTINEL_LOG_VERBOSE to log debugger error stdout

DEPLOYSENTINEL_LOG_VERBOSE=1 ('1', 'yes' or 'true')