Nearsighted Prank Master

    jest-preview
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.5 • Public • Published

    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

    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

    💻

    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 🥉

    Install

    npm i jest-preview

    DownloadsWeekly Downloads

    4,859

    Version

    0.2.5

    License

    MIT

    Unpacked Size

    96.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • nvh95
    • ntt261298