Introduction

Meet Jest Preview

We are sure you are tired of debugging integration UI tests and reading a whole lot of cryptic HTML output. It's incredibly tough to visualize the DOM structure and see what went wrong and why. We are sure because we were there. That's why we have created Jest Preview!

Jest Preview is an open-source library to make your life easier. See your test output directly in the browser as you would normally see the app you are working on. Write test and watch rendered output changes accordingly. Jest Preview lets you concentrate on tests in the "real world" rather than deciphering HTML code. Sounds interesting? Sure it does! Give it a try 😉

👇 continue reading to know more and try Jest Preview in action

info

You can go straight to Installation guide to install it locally on your machine.

Features

• 🐣 It's incredibly simple to install and use!
• 👀 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.
• 🧑‍💻 Our contributors work hard to add more features and provide support ⚙️

info

Would like to contribute? Great! We appreciate it a lot! Check our Contributing section 🙏

Online Demo

Want to try the library before installing it? We got you covered! Check out StackBlitz Demo App or try it right here 😉

Framework agnostic

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

How to use Jest Preview with only 2 lines of code

Start the Jest Preview Server by running the CLI command jest-preview. To make it look even better, follow the Installation guide

+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();
  });
});

It's that simple! 😱