Skip to content

nvh95/jest-preview

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
cli
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Jest Preview Logo

Jest Preview

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

Jest Preview Demo

Try Jest Preview Online. No downloads needed!

All Contributors

npm npm Mentioned in Awesome Jest

PRs Welcome Best of JS Discord

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 initiates a server and serve your HTML in a browser, then you can see your actual UI visually, which helps you 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 testing libraries.

Features

  • πŸ‘€ Preview your actual app's HTML in a browser in milliseconds.
  • πŸ”„ Auto reload browser when execute 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.

Examples

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 preview.
  • 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

πŸ’» πŸ“– πŸ’‘

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

⚠️

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

Star history

Star History Chart

License

This is open source software

MIT

Sponsors

If you like the project and want us continue to develop it, please sponsor us via Open Collective, starting from $1.

Bronze Sponsor πŸ₯‰ and Silver Sponsor πŸ₯ˆ on Open Collective will have your logo on README.md and www.jest-preview.com, for the Gold Sponsor πŸ₯‡ and Diamond Sponsor πŸ’Ž, please contact the author.

Bronze Sponsor πŸ₯‰