diff --git a/README.md b/README.md index 8621c2f..da38814 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,19 @@ # svg-jest + This is a small library which transforms .SVG files for jest. It produces -and SVG in the stream which has two properties 'data-jest-file-name' which -includes the path and 'data-jest-name' which just the name portion. +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: ```js import MySvg from '../images/an-image.svg'; -``` -```js + import { ReactComponent as MySvg} from '../images/an-image.svg'; ``` @@ -35,12 +39,12 @@ The resulting HTML: ```html
- +
``` -Any properties passed to '' are passed along into both the snapshot -and the resulting HTML. +In additoin, any properties passed to '' are passed along into both the snapshot +and the resulting trees. # usage Configure jest: diff --git a/index.js b/index.js index c44cb84..20167b5 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,8 @@ const ${functionName} = (props) => return React.createElement('svg', { ...props, 'data-jest-file-name': '${pathname}', - 'data-jest-svg-name': '${filename}' + 'data-jest-svg-name': '${filename}', + 'data-testid': '${filename}' }); } diff --git a/package.json b/package.json index 1f4913d..979e3ba 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "description": "A simple transformer for .SVG for Jest", "main": "index.js", + "repository": "https://github.com/half-halt/svg-jest.git", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },