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:

1import React from 'react';
2import MySvg from '../images/an-image.svg';
3
4function MyComponent() {
5    return (
6        <div>
7            <MySvg style={{color: 'blue'}}/>
8        </div>
9    );
10}

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:

1{
2    "jest": {
3        "transform": {
4            "^.+\\.jsx?$": "babel-jest",
5            "^.+\\.svg$": "jest-svg-transformer"
6        }
7    }
8}