Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nvh95/jest-preview

Debug your Jest tests. Effortlessly.🛠🖼
https://github.com/nvh95/jest-preview

angular css debug frontend javascript jest jest-view-html nextjs productivity react svelte test testing vue

Last synced: 7 days ago
JSON representation

Debug your Jest tests. Effortlessly.🛠🖼

Host: GitHub
URL: https://github.com/nvh95/jest-preview
Owner: nvh95
License: mit
Created: 2022-03-21T16:18:19.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-07-29T18:48:41.000Z (3 months ago)
Last Synced: 2024-10-09T17:08:44.815Z (27 days ago)
Topics: angular, css, debug, frontend, javascript, jest, jest-view-html, nextjs, productivity, react, svelte, test, testing, vue
Language: TypeScript
Homepage: https://www.jest-preview.com
Size: 10.6 MB
Stars: 2,333
Watchers: 8
Forks: 75
Open Issues: 59
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome - nvh95/jest-preview - Debug your Jest tests. Effortlessly.🛠🖼 (TypeScript)
awesome-jest - jest-preview
awesome-angular - jest-preview - Debug your Jest tests. Effortlessly. (Table of contents / Angular)
fucking-awesome-angular - jest-preview - Debug your Jest tests. Effortlessly. (Table of contents / Angular)
fucking-awesome-angular - jest-preview - Debug your Jest tests. Effortlessly. (Table of contents / Angular)

README

        


 

 

  

 





Jest Preview





Debug your Jest tests. Effortlessly. 🛠🖼





  





  Try Jest Preview Online. No downloads needed!



[![All Contributors](https://img.shields.io/badge/all_contributors-32-orange.svg?style=flat-square)](#contributors-)

[![npm version](https://img.shields.io/npm/v/jest-preview)](https://www.npmjs.com/package/jest-preview)

[![npm total downloads](https://img.shields.io/npm/dt/jest-preview)](https://www.npmjs.com/package/jest-preview)

[![total GitHub stars](https://img.shields.io/github/stars/nvh95/jest-preview)](https://github.com/nvh95/jest-preview/stargazers)

[![Mentioned in Awesome Jest](https://awesome.re/mentioned-badge.svg)](https://github.com/jest-community/awesome-jest#debug)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](./CONTRIBUTING.md)

[![Best of JS](https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=nvh95%2Fjest-preview%26since=weekly)](https://bestofjs.org/projects/jest-preview)

[![Discord](https://img.shields.io/discord/967456149735637002?logo=discord&logoColor=ffffff&style=flat-square)](https://discord.gg/z4DRBmk7vx)

[![Try Jest Preview now](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/jest-preview?file=src%2FApp.test.tsx,README.md)

_Using Vitest? Try [Vitest Preview](https://github.com/nvh95/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](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: [![Discord](https://img.shields.io/discord/967456149735637002?logo=discord&logoColor=ffffff&style=flat-square)](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)):

  

    

      
_{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
⚠️

      
_{Bennett Dams}
📖

      
_{Steven Rosato}
💡 🐛

      
_nhducit
🤔

      
_{Benoit GRASSET}
🐛

      
_{Sergii Kirianov}
📖 🖋 💻

    

    

      
_{Kim, Harim}
📖

      
_{Lars Gyrup Brink Nielsen}
📖 💡

      
_{Mike Shi}
📖

      
_{Veniamin Krol}
📖

      
_{Ikko Ashimine}
💻

      
_{Pavel Shut}
🐛

      
_{David Z Hao}
🐛

    

    

      
_Rohitbels
💻

      
_{Rivaldi Putra}
📖

      
_{Long Zhao}
💻

      
_{Justin Sun}
🌍

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

## Star history

[![Star History Chart](https://api.star-history.com/svg?repos=nvh95/jest-preview&type=Date)](https://star-history.com/#nvh95/jest-preview&Date)

## License

![This is open source software](https://user-images.githubusercontent.com/8603085/161439058-98faea42-c6e6-46f4-9ce6-218fad5f3b9a.gif)

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 Sponsors 🥉



  





  



# Past Sponsors