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
- ✅ 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.

Examples

Use with Vite React: https://www.jest-preview.com/docs/examples/vite-react
Use with Create React App: https://www.jest-preview.com/docs/examples/create-react-app
Use with Next.js Rust Compiler: https://www.jest-preview.com/docs/examples/next-rust
Use with Next.js Babel: https://www.jest-preview.com/docs/examples/next-babel
Use with Svelte: https://www.jest-preview.com/docs/examples/svelte

Feedback

Your feedback is very important to us. Please help jest-preview becomes a better software by submitting a 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.

Upcoming features

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

Support

Please file an issue, or add a new discussion if you encounter any issues.

You can also mention @JestPreview or @hung_dev on twitter if you want to have some more discussions or suggestions.

We also have a Discord server:

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} 📖	_{Huynh Duc Duy} 💻	_{Nuno Casteleira} 🐛	_sundaycrafts 💻
_LunduoCai 🐛	_huyenuet ⚠️	_{Bennett Dams} 📖	_{Steven Rosato} 💡 🐛	_nhducit 🤔	_{Benoit GRASSET} 🐛	_{Sergii Kirianov} 📖 🖋 💻
_{Kim, Harim} 📖	_{Lars Gyrup Brink Nielsen} 📖