nvh95/jest-preview

Debug your Jest tests. Effortlessly.🛠🖼

Summary

jest-preview is a debugging tool that renders the HTML produced by a Jest test in a real browser, so engineers can see UI issues visually rather than mentally parsing markup. Although it was originally built around Jest and react-testing-library, the package is described as framework-agnostic and includes setup examples for Vite React, Create React App, Next.js, Svelte, Angular, and Vue.

What it is useful for

The main pain point it addresses is debugging frontend tests when the rendered HTML is too complex to picture from a failure log. It is useful when:

• You need to see how a component actually looks in a browser (styles, layout, images) while iterating on a failing test.
• Your project uses direct CSS imports, CSS Modules, global CSS, Sass, or CSS-in-JS libraries such as styled-components or Emotion, all of which are listed as supported.
• You work in a framework other than React; documented examples cover Next.js, Svelte, Angular, and Vue alongside Vite React and CRA.
• You want the preview to refresh automatically — the browser reloads whenever preview.debug() runs.

A few limitations to keep in mind: the README lists "Support more css-in-js libraries" and "Multiple previews" under upcoming features, so engineers relying on other CSS-in-JS solutions should verify support before adopting it. The project was initially designed for Jest + react-testing-library, so behavior on other test runners is not the primary use case the documentation targets.

How engineers can use it

The documented two-line integration shown in the README is:

import preview from 'jest-preview';
// or: import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    preview.debug();
  });
});

Beyond the import and the preview.debug() call, you must start the Jest Preview Server by running the jest-preview CLI. The README deliberately does not include the full installation snippet inline — it links out to an Installation Guide and a Usage Guide on the project website for the exact commands, Jest transform configuration to intercept CSS and image files, and the optional global CSS setup. For projects with non-default code transforms, a separate Code Transformation guide covers advanced cases.