sj
svg-jest
npm i svg-jest
sj

svg-jest

A small utility for Jest for converting SVG files into react components for testing.

by samclement@msn.com

1.0.1 (see all)License:MITTypeScript:Not Found
npm i svg-jest
Readme

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:

import MySvg from '../images/an-image.svg';

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

The following JavaScript

const MyComponent = () => {
  return (
    <div>
    <MySvg/>
    </div>
  );
}

The resulting snapshot:

<div>
    <AnImage/>
</div>

The resulting HTML:

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

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

usage

Configure jest:

{
    "jest": {
        "transform": {
            "\\.svg$": "svg-jest"
        }
    }
}

Downloads/wk

16.9K

GitHub Stars

11

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

1
VersionTagPublished
1.0.1
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate