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:

• Vite React
• Create React App
• Nextjs
• Svelte
• Angular
• Vue

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.

Feedback

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

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

Star history

License

MIT

Sponsors

Your financial support helps the project alive and in a development mode. Make an impact by sponsoring us $1 via Open Collective.

• Bronze Sponsor 🥉:
  • Your company's logo/ profile picture on README.md and www.jest-preview.com
• Silver Sponsor 🥈:
  • All of these above
  • Your requests will be prioritized.
• Gold Sponsor 🥇:
  • All of these above
  • Let's discuss your benefits for this tier, please contact the author
• Diamond Sponsor 💎:
  • All of these above
  • Let's discuss your benefits for this tier, please contact the author

Bronze Sponsor 🥉

0.3.1

Features

• Inline @import statement
• Support LESS

0.3.0

Features

• Support viewing SVG when importing as a component in React
• Use PostCSS configure to transform CSS
• Convert to pnpm

Chores

• Convert cypress tests to typescript

0.2.8

Fixes

• Fix bug Jest Preview Dashboard does not reload on Linux systems.

0.2.7

Chores

• Write index.html to disk, instead of body.html and head.html separately
• Merge file and fileCRA transformations

0.2.6

Fixes

• Support old version of Sass
• Fix do not show image if use with ts-jest

0.2.5

Features

• Re-architect CSS Code Transformation (Pre-process => Post-process)
• Support SCSS Modules
• Support basic TailwindCSS
• Improve config-cra on monorepo
• Add a new CLI: jest-preview clear-cache

Fixes

• Try catch more strict in postinstall

0.2.4

Features

• Notify user when there is a new "latest" version
• Deprecate externalCss (gradually)

Fixes

• Sass enhancement

Chores

• Improve docs and message in Jest Preview Dashboard

0.2.3

Fixes

• Make relative filenames consistent between Operating systems.
• Fix sass on Windows.

Chores

• Add cross-env to run on Windows

0.2.2

Features

• Support Jest 28

Chores

• Add Jest 28 example

0.2.1

Features

• First class support for Create React App
• Support more CSS-in-JS libraries such as emotion
• Add tests
• Add docs

0.2.0

Features

• Auto preview UI whenever a test fails, you don't have to call preview.debug() manually.

0.1.7

Fixes

• Fix jest-preview postinstall script can't run on folder with space in name

0.1.6

Features

• Add an adapter for Next.js's Rust compiler for Jest
• Add examples for and Next Jest Rust Compiler and Next Jest Babel

0.1.5

Features

• Support non-english characters and responsive design.
• Support Sass.

0.1.4

Fixes

• Fix: jest --clearCache might break user's installation flow since jest might be installed after jest-preview.

0.1.3

Features

• Support serving files from Public folder.
• Clear Jest cache after installation.

Fixes

• Update rollup to:
  • Terser
  • Transpile to ES2019 (e.g: optional chaining)

Chores

• Export debug as named also.
• Handle CSS Modules asynchronously.

0.1.2

Features

• Add pre-configured transformers, so users can integrate jest-preview to their projects easier.
  • jest-preview/transforms/css
  • jest-preview/transforms/file
  • jest-preview/transforms/fileCRA

0.1.1

Features

• Support CSS Modules.
  • Caveat: Support CSS Modules for CRA in next version.

0.1.0

Features

• [BREAKING CHANGES] Simplify usage of the core function of jest-preview: preview(htmlElement) to preview.debug().
• Users do not need to pass any argument to preview.debug(), the default is document.body which is the whole page (how authors expect users to use jest-preview).
• Add title and favicon.ico for Dashboard.

Fixes

• <input checked="" disabled="" type="checkbox"> Fix externalCss get cached.

0.0.3

Features

• Rewrite transforms. Do not need to copy assets to cache folder.
• Add processFileCRA for CRA file transform.
• [BREAKING CHANGES for CRA users] CRA users need to update fileTransform.js to use processFileCRA. See more at CRA README.md.

Chores

• Simplify the usage in docs and examples: preview(render(<App />).container) => preview(document.body).

0.0.2

0.0.2-alpha.0

Chores

• Reuse opening jest-preview server tab on Chrome Mac.

0.0.2-alpha.0

Fixes

• <input checked="" disabled="" type="checkbox"> Fix #15

Chores

• <input checked="" disabled="" type="checkbox"> Update publish scripts.

0.0.1

Features

• Add previewServer expose as jest-preview cli.
• Add css and file transforms.
  • Support direct CSS import.
  • Support viewing images, media files...
• Support styled-components.
• Reload browser using web socket.

0.0.1-alpha.1

Features

• Watch index.html on created and removed. Add websocket reload for fallback page.
• Fix README.md.

0.0.1-alpha.0

Features

• Add previewServer expose as jest-preview cli.
• Add css and file transforms.
  • Support direct CSS import.
  • Support viewing images, media files...
• Support styled-components.
• Reload browser using web socket.