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.

Installation

Install the jest plugin into your jest project.

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

Usage

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');
 
setup();

Configure jest's transform to transform CSS

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

module.exports = {
  transform: {
    '^.+\\.(css|scss|sass|less)$':
      '@deploysentinel/jest-rtl-debugger/transforms/css',
  },
};

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: https://deploysentinel.com/profile (opens in a new tab).

DEPLOYSENTINEL_API_KEY=YOUR_API_KEY

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')

Debugging

You can set DEPLOYSENTINEL_LOG_VERBOSE to log debugger error stdout

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