Skip to content

nvh95/jest-preview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Jest Preview Logo

Debug your Jest tests. Effortlessly. πŸ› πŸ–Ό

Jest Preview Demo

Try Jest Preview Online. No downloads needed!

All Contributors

npm version npm total downloads total GitHub stars Mentioned in Awesome Jest

PRs Welcome Best of JS Discord

Try Jest Preview now

Using Vitest? Try Vitest Preview

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:
  • πŸŒ„ 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: Discord

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
Hung Viet Nguyen

πŸ’» πŸ“– πŸ’‘
Truong Nguyen
Truong Nguyen

πŸ’» πŸ“– πŸ’‘
Viet Huu Doan
Viet Huu Doan

🎨
HarveyNguyen
HarveyNguyen

⚠️
Matt Murphy
Matt Murphy

πŸ“–
Traitanit Huangsri
Traitanit Huangsri

πŸ’»
Thanh Son Nguyen
Thanh Son Nguyen

πŸ’» πŸ’‘ πŸ“–
Minh Nguyen
Minh Nguyen

πŸ“–
Kyle(Tình Vũ)
Kyle(Tình Vũ)

πŸ›
Makoto Tateno
Makoto Tateno

πŸ“–
Abhishek Rawat
Abhishek Rawat

πŸ“–
Huynh Duc Duy
Huynh Duc Duy

πŸ’»
Nuno Casteleira
Nuno Casteleira

πŸ›
sundaycrafts
sundaycrafts

πŸ’»
LunduoCai
LunduoCai

πŸ›
huyenuet
huyenuet

⚠️
Bennett Dams
Bennett Dams

πŸ“–
Steven Rosato
Steven Rosato

πŸ’‘ πŸ›
nhducit
nhducit

πŸ€”
Benoit GRASSET
Benoit GRASSET

πŸ›
Sergii Kirianov
Sergii Kirianov

πŸ“– πŸ–‹ πŸ’»
Kim, Harim
Kim, Harim

πŸ“–
Lars Gyrup Brink Nielsen
Lars Gyrup Brink Nielsen

πŸ“– πŸ’‘
Mike Shi
Mike Shi

πŸ“–
Veniamin Krol
Veniamin Krol

πŸ“–
Ikko Ashimine
Ikko Ashimine

πŸ’»
Pavel Shut
Pavel Shut

πŸ›
David Z Hao
David Z Hao

πŸ›
Rohitbels
Rohitbels

πŸ’»
Rivaldi Putra
Rivaldi Putra

πŸ“–
Long Zhao
Long Zhao

πŸ’»
Justin Sun
Justin Sun

🌍

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

Star history

Star History Chart

License

This is open source software

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 πŸ₯‰:
  • 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 Sponsors πŸ₯‰

Past Sponsors