Jest Preview

Debug your Jest tests. Effortlessly. 🛠🖼

Try Jest Preview Online. No downloads needed!

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 initiates a server and serve your HTML in a browser, then you can see your actual UI visually, which helps you 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 testing libraries.

Features

👀 Preview your actual app's HTML in a browser in milliseconds.
🔄 Auto reload browser when execute preview.debug().
💅 Support CSS:
- ✅ Direct CSS import
- ✅ Number of CSS-in-JS libraries, such as:
  - ✅ Styled-components
  - ✅ Emotion
- ✅ External 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();
  });
});

Examples

Use with Vite: Example with Vite
Use with Create React App: Example with CRA
Use with NextJs Rust Compiler: Example with NextJs Rust Compiler
Use with NextJS Babel: Example with CRA

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.

Upcoming features

Support more css-in-js libraries.
Multiple preview.
You name it.

Contributing

We can't wait to see your contributions. See the Contribution Guide at CONTRIBUTING.md

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Hung Viet Nguyen} 💻 📖 💡	_{Truong Nguyen} 💻 📖 💡	_{Viet Huu Doan} 🎨	_HarveyNguyen ⚠️	_{Matt Murphy} 📖	_{Traitanit Huangsri} 💻	_{Thanh Son Nguyen} 💻 💡 📖
_{Minh Nguyen} 📖	_{Kyle(Tình Vũ)} 🐛	_{Makoto Tateno} 📖	_{Abhishek Rawat} 📖