Package Exports

jest-preview
jest-preview/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jest-preview) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Jest Preview Logo

Jest Preview

Debug your Jest tests. Effortlessly. 🛠🖼

Jest Preview Demo

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/nextjs-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} 📖 💡	_{Mike Shi} 📖	_{Veniamin Krol} 📖