jest-svg-transformer

a jest transformer to make testing with svgs in react nicer

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
jest-svg-transformer
021.0.06 years ago6 years agoMinified + gzip package size for jest-svg-transformer in KB

Readme

jest-svg-transformer
transform svgs for for jest+react to declutter snapshots
Very useful with react-svg-loader. This allows you to import svgs directly into your react components, but still have nice snapshots.
Using enzyme's shallow rendering, for example:
import React from 'react';
import MySvg from '../images/an-image.svg';

function MyComponent() {
    return (
        <div>
            <MySvg style={{color: 'blue'}}/>
        </div>
    );
}

will result in a snapshot that looks like this:
<div>
    <SvgAnImage style={{color: 'blue'}} />
</div>
usage
This works with both enzyme and react-test-renderer.
Configure jest:
{
    "jest": {
        "transform": {
            "^.+\\.jsx?$": "babel-jest",
            "^.+\\.svg$": "jest-svg-transformer"
        }
    }
}