Using Vitest? Try Vitest Preview

Why jest-preview

When writing tests using Jest, we usually debug by reading the HTML code. Sometimes, the HTML is too complicated to visualize the UI in our head. jest-preview previews your Jest tests right in a browser, then you can see your actual UI visually, which helps you write and debug Jest tests faster.

jest-preview is initially designed to work with Jest and react-testing-library. The package is framework-agnostic, and you can use it with any frontend frameworks and testing libraries. For examples:

Features

👀 Preview your actual app's HTML in a browser in milliseconds.
🔄 Auto reload browser when executing preview.debug()`.
💅 Support CSS:
- ✅ Direct CSS import
- ✅ Number of CSS-in-JS libraries, such as:
  - ✅ Styled-components
  - ✅ Emotion
- ✅ Global CSS
- ✅ CSS Modules
- ✅ Sass
🌄 Support viewing images.

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();
  });
});

You also need to start the Jest Preview Server by running the CLI jest-preview. Please continue to read Usage for the details instructions.

Feedback

Your feedback is very important to us. Please help jest-preview becomes a better software by submitting feedback here.

Installation

See the Installation Guide on Jest Preview official website.

Usage

See the Usage Guide on Jest Preview official website.

Advanced configurations

Jest Preview comes with Pre-configured transformation. However, in more advanced use cases where you have custom code transformation, check out the Code Transformation Guide.