Debug your Jest tests. Effortlessly. 🛠🖼
Try Jest Preview Online. No downloads needed!
[](#contributors-)
[](https://www.npmjs.com/package/jest-preview)
[](https://www.npmjs.com/package/jest-preview)
[](https://github.com/jest-community/awesome-jest#debug)
[](./CONTRIBUTING.md)
[](https://bestofjs.org/projects/jest-preview)
[](https://discord.gg/z4DRBmk7vx)
[](https://stackblitz.com/edit/jest-preview?file=src%2FApp.test.tsx,README.md)
## 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](https://jestjs.io/) and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/). The package is framework-agnostic, and you can use it with any frontend frameworks and testing libraries. For examples:
- [Vite React](https://www.jest-preview.com/docs/examples/vite-react)
- [Create React App](https://www.jest-preview.com/docs/examples/create-react-app)
- [Nextjs](https://www.jest-preview.com/docs/examples/nextjs)
- [Svelte](https://www.jest-preview.com/docs/examples/svelte)
- [Angular](https://www.jest-preview.com/docs/examples/angular)
- [Vue](https://www.jest-preview.com/docs/examples/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](#3-configure-jests-transform-to-intercept-css-and-files)
- ✅ Number of CSS-in-JS libraries, such as:
- ✅ [Styled-components](https://styled-components.com/)
- ✅ [Emotion](https://emotion.sh/)
- ✅ [Global CSS](https://www.jest-preview.com/docs/getting-started/installation#4-optional-configure-global-css)
- ✅ [CSS Modules](https://github.com/css-modules/css-modules)
- ✅ [Sass](https://sass-lang.com/)
- 🌄 Support viewing images.
## How to use `jest-preview` in 2 lines of code
```diff
+import preview from 'jest-preview';
describe('App', () => {
it('should work as expected', () => {
render();
+ preview.debug();
});
});
```
Or:
```diff
+import { debug } from 'jest-preview';
describe('App', () => {
it('should work as expected', () => {
render();
+ debug();
});
});
```
You also need to start the Jest Preview Server by running the CLI `jest-preview`. Please continue to read [Usage](https://www.jest-preview.com/docs/getting-started/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](https://forms.gle/PJFH5oEzi7gsb7Ac6).
## Installation
See the [Installation Guide](https://www.jest-preview.com/docs/getting-started/installation) on Jest Preview official website.
## Usage
See the [Usage Guide](https://www.jest-preview.com/docs/getting-started/usage) on Jest Preview official website.
## Advanced configurations
Jest Preview comes with [Pre-configured transformation](https://www.jest-preview.com/docs/getting-started/installation#2-configure-jests-transform-to-transform-css-and-files). However, in more advanced use cases where you have custom code transformation, check out the [Code Transformation Guide](https://www.jest-preview.com/docs/advanced-guides/code-transform).
## Upcoming features
- Support more `css-in-js` libraries.
- Multiple previews.
- [You name it](https://github.com/nvh95/jest-preview/labels/feature_request).
## Support
Please [file an issue](https://github.com/nvh95/jest-preview/issues), or [add a new discussion](https://github.com/nvh95/jest-preview/discussions) if you encounter any issues.
You can also mention [@JestPreview](https://twitter.com/JestPreview) or [@hung_dev](https://twitter.com/hung_dev) on Twitter if you want to have some more discussions or suggestions.
We also have a Discord server: [](https://discord.gg/z4DRBmk7vx)
## Contributing
We can't wait to see your contributions. See the Contribution Guide at [CONTRIBUTING.md](/CONTRIBUTING.md)
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
## Star history
[](https://star-history.com/#nvh95/jest-preview&Date)
## 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](https://opencollective.com/jest-preview).
- Bronze Sponsor 🥉:
- Your company's logo/ profile picture on **README.md** and [www.jest-preview.com](https://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](https://twitter.com/hung_dev)
- Diamond Sponsor 💎:
- All of these above
- Let's discuss your benefits for this tier, please contact [the author](https://twitter.com/hung_dev)
### Bronze Sponsor 🥉
