跳到主要内容

· 阅读需 11 分钟
Hung Viet Nguyen
Jest Preview discussion stars at 38:15

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.

· 阅读需 1 分钟
Hung Viet Nguyen

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.

· 阅读需 3 分钟
Hung Viet Nguyen

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.

· 阅读需 3 分钟
Thanh Son Nguyen
Hung Viet Nguyen

Examples

First-class support for Next.js Rust-based compiler for Jest

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:

· 阅读需 1 分钟
Truong Nguyen
Hung Viet Nguyen

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.