jest-preview is initially designed to work with jest, react and react-testing-library. However, the package is framework-agnostic, and you can use it with any testing libraries. Today, we add an example of using it with Svelte and Svelte Testing Library
I had a chance to talk with Nick Nisi about Jest Preview on JS Party Podcast. In this episode, Nick shared his experience attending JSNation and React Summit in Amsterdam. Our discussion about Jest Preview starts at 38:15. I briefly introduced what Jest Preview is and what problems it is trying to solve. I also shared about Best Practice to use Jest Preview when you write tests, and how it can boost your productivity by 300%. Finally, I explained how the library works under the hood (hint: it's very simple).
I hope you enjoy this episode.
Bellow you can find the transcript of this episode.
Previous Jest Preview provides a way to configure external CSS via externalCss option in jestPreviewConfigure function. However, we realized that we can actually import the css DIRECTLY in the setup test file (usually setupFilesAfterEnv in Jest config) instead. This way, we can use the same logic to process external CSS as well as CSS in your components.
CRA is well known for bootstrapping a React App. It hides the complexity of bundling and configuration over react-scripts. However, in some scenarios, it's very hard to customize CRA for a specific purpose. Make Jest Preview works seamlessly with CRA is an example.
Currently, there is no way to customize CRA's jest.config.js file easily. So, Jest Preview bundles a few CLIs to make integrating Jest Preview to CRA effortless. We hope with this built-in helper CLI, CRA users can adopt Jest Preview easier.
We are so happy to annouce that we are launching Jest Preview Automatic Mode. In this mode, you don't have to trigger the preview.debug() function by yourself. Jest Preview AUTOMATICALLY preview the UI of your app WHENEVER a Jest test fails.
We want Jest Preview to have the best DX for all frontend developers. Besides, Next.js is a wonderful and extremely popular React framework that is powered by Vercel. So we are providing a first-class support for Next.js by offering an adapter to integrate Jest Preview to Next.js effortlessly, thanks to great work from thanhsonng. If you use Next.js version 12.0.0 onwards, you can just use configureNextJestPreview to configure Jest seamlessly:
Another day, another feature added to Jest Preview. Today, we're adding support for Sass, thanks to the awesome work from Truong Nguyen.
Sass is one of the most popular CSS extension language in the ecosystem and is being used widely. From version 0.1.5, style written in Sass will be displayed in Jest Preview Dashboard.
Hello everyone. It's been 17 days from the first version of Jest Preview. We have worked hard to make Jest Preview a great library to support frontend engineers writing and debugging tests in Jest. We completed the implementation to support: