@sundaycrafts/jest-preview v0.3.4
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:
- ✅ Direct CSS import
- ✅ Number of CSS-in-JS libraries, such as:
- ✅ External CSS
- ✅ CSS Modules
- ✅ Sass
- 🌄 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();
});
});
Examples
- 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
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.
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):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT