svg-jest

This is a small library which transforms .SVG files for jest. It produces and SVG in the stream.

The transformed item will have the following properties on it.

• data-jest-file-name: The name of the file (e.g. 'some-image.svg')
• data-jest-svg-name: Only the name portion of the file (e.g. 'some-image')
• data-testid: Same as data-jest-svg-name, but works with @testing-library/react getByTestId()

Works with both of these formats:

1import MySvg from '../images/an-image.svg';
2
3import { ReactComponent as MySvg}  from '../images/an-image.svg';

The following JavaScript

1const MyComponent = () => {
2  return (
3    <div>
4	<MySvg/>
5    </div>
6  );
7}

The resulting snapshot:

1<div>
2    <AnImage/>
3</div>

The resulting HTML:

1<div>
2 <svg data-jest-file-name='an-image.svg' data-jest-svg-name='an-image' data-testid='an-image'/>
3</div>

In additoin, any properties passed to '' are passed along into both the snapshot and the resulting trees.

usage

Configure jest:

1{
2    "jest": {
3        "transform": {
4            "\\.svg$": "svg-jest"
5        }
6    }
7}