Debug your Jest tests. Effortlessly. 🛠🖼
Try Jest Preview Online. No downloads needed!
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.
- 👀 Preview your actual app's HTML in a browser in milliseconds.
- 🔄 Auto reload browser when execute
preview.debug(). - 💅 Support CSS:
- 🌄 Support viewing images.
+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();
});
});- Use with Vite: Example with Vite
- Use with Create React App: Example with CRA
- Use with NextJs Rust Compiler: Example with NextJs Rust Compiler
- Use with NextJS Babel: Example with CRA
See the Installation Guide on Jest Preview official website.
See the Usage Guide on Jest Preview official website.
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.
- Support more
css-in-jslibraries. - Multiple preview.
- You name it.
Install dependencies
npm installTo see the real demo app
npm run devRun jest and jest-preview simultaneously
npm run testOpen chrome at http://localhost:3336 to see the preview
However, it's recommend to run jest and jest-preview separately
npm run server # Run jest-preview server
npm run test:only # Run jestThanks 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 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT