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

Support more css-in-js libraries.
Multiple previews.
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} 📖	_{Ikko Ashimine} 💻	_{Pavel Shut} 🐛	_{David Z Hao} 🐛
_Rohitbels 💻	_{Rivaldi Putra} 📖	_{Long Zhao} 💻	_{Justin Sun} 🌍