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 executingpreview.
debug()`.💅 Support CSS:✅ Direct CSS import✅ Number of CSS-in-JS libraries, such as:✅ Global CSS✅ CSS Modules✅ Sass
🌄 Support viewing images.
jest-preview
in 2 lines of code
How to use +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):
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