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.
You can even add Sass as an external CSS directly in your setup test file. This is usually handy for stylesheet files imported in src/index.js or src/main.js.
// setupTests.js
import { jestPreviewConfigure } from 'jest-preview';
import './global.scss';
import '@your-design-system/css/dist/index.min.scss';
For now, Jest Preview only supports Dart Sass, since LibSass and Node Sass are deprecated. One caveat is that Jest Preview doesn't support load path yet. We will add it to the next version.
We hope with the support of Sass, Jest Preview can cover more use cases and be more useful for front end engineers to write tests. If you have any questions, please reach us at Discussion.
Happy jesting!