Preview your Jest tests in a browser to visually debug UI components and write tests faster.
Jest Preview is a debugging tool for Jest tests that renders your component's HTML output in a browser. It solves the problem of debugging complex UIs by allowing developers to see the actual visual result of their tests, rather than just reading HTML code.
Frontend developers using Jest for testing React, Vue, Angular, Svelte, or other UI frameworks, especially those working with complex components and CSS-in-JS libraries.
It provides a fast, visual debugging experience directly integrated into Jest workflows, supports a wide range of CSS and styling methods, and works with any frontend framework, making test debugging more intuitive and efficient.
Debug your Jest tests. Effortlessly.🛠🖼
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Renders HTML in a browser in milliseconds, eliminating the need to mentally visualize complex UI from HTML strings, as shown in the demo GIF.
Supports direct CSS imports, CSS Modules, Sass, and CSS-in-JS libraries like styled-components and Emotion, covering most styling methods.
Works with React, Vue, Angular, Svelte, and other frontend frameworks, with dedicated examples in the documentation.
Requires only two lines of code with `preview.debug()` in tests, and auto-reloads the browser on debug calls.
Displays images used in components, enhancing visual accuracy for media-heavy UIs.
Requires running the `jest-preview` CLI separately, adding an extra step to the testing workflow and potential setup complexity.
Only explicitly supports styled-components and Emotion; support for other libraries is listed as an upcoming feature, indicating gaps.
Needs Jest transform configuration for CSS and files, which can be tricky in advanced cases with custom code transformations.
Browser-based preview may not seamlessly fit into headless CI environments, limiting use in automated pipelines without workarounds.