Skip to main content

Introduction

Why Jest Preview​

When writing tests using Jest, we usually debug by reading the HTML code. Sometimes the HTML is too complicated and it's hard to imagine how the UI looks in our head. jest-preview initiates a server and serve your HTML in a browser, then you can see your actual UI visually. This way, it helps you debug jest tests faster.

jest-preview is initially design to work with jest and react-testing-library. However it's framework-agnostic and you can use it with any testing libraries.

Online Demo​

You can try Jest Preview right on the browser without installing or cloning anything, thanks to StackBlitz:

Try Jest Preview Online. No downloads needed!.

What does it look like to use Jest Preview​

Jest Preview Demo

How to use jest-preview in 2 lines of code​

+import preview from 'jest-preview';

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

Or:

+import { debug } from 'jest-preview';

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