makotot / jest-preview

Debug your Jest tests. Effortlessly.🛠🖼

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
  • ✅ Styled-components
  • ✅ 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.

Run jest-preview locally

Install dependencies

npm install

To see the real demo app

npm run dev

Run jest and jest-preview simultaneously

npm run test

Open chrome at http://localhost:3336 to see the preview

However, it's recommend to run jest and jest-preview separately

npm run server # Run jest-preview server
npm run test:only # Run jest

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ũ) 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT