Skip to main content

Usage

info

Automatic Mode is now available and is recommended for general use, instead of manually triggering preview.debug().

1. Update to package.json​

{
  "scripts": {
    "jest-preview": "jest-preview"
  }
}

Optionally, you can use npm-run-all to run Jest and jest-preview server in parallel

{
  "scripts": {
    "test:debug": "npm-run-all -p test jest-preview"
  },
  "devDependencies": {
    "npm-run-all": "latest"
  }
}

2. Run the jest-preview server​

# You can use PORT to customize port, default to 3336
npm run jest-preview
# Or
yarn jest-preview
pnpm run jest-preview

3. Preview your html from jest. Following code demo how to use it with react-testing-library​

import preview from 'jest-preview';

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

    userEvent.click(screen.getByTestId('increase'));
    userEvent.click(screen.getByTestId('increase'));

    // Open http://localhost:3336 to see the preview
    preview.debug();

    expect(screen.getByTestId('count')).toContainHTML('2');
  });
});

Then visit http://localhost:3336 to see the preview.

Preview your jest test in the browser

If you opt-in to Automatic Mode, Jest Preview will automatically preview your app UI in a browser whenever there is a failed test.

describe('Demo', () => {
  it('should work as expected', () => {
    render(<Demo />);

    userEvent.click(screen.getByTestId('increase'));
    // userEvent.click(screen.getByTestId('increase'));

    expect(screen.getByTestId('count')).toContainHTML('2');
  });
});

Preview your jest test in the browser