@ayusharma/jest-css-module-transformer

A jest preprocessor for css and scss files

Usage no npm install needed!

<script type="module">
  import ayusharmaJestCssModuleTransformer from 'https://cdn.skypack.dev/@ayusharma/jest-css-module-transformer';
</script>

README

Jest css module transformer

This package provides a mock to *.scss & *.css files and keeps the class names intact in Jest snapshot

Original markup:

    <div class=`container ${css.marginAuto}`>
        <section class=`${css.blogSection}`>...</section>
    </div>

Snapshot markup without transformation:

    <div class="container undefined">
        <section class="undefined">...</section>
    </div>

Snapshot markup with transformation:

    <div class="container marginAuto">
        <section class="blogSection">...</section>
    </div>

Installation

    yarn add --dev @ayusharma/jest-css-module-transformer

Or

    npm install --save-dev @ayusharma/jest-css-module-transformer

Use

Add the following entry in Jest configuration file.

    transform: {
        '^.+\\.(css|scss)

: '@ayusharma/jest-css-module-transformer'
    },