# jest-transformer-svg

> a jest transformer for testing with svg files in react

Latest version **2.1.0** (published 2025-01-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install jest-transformer-svg
pnpm add jest-transformer-svg
yarn add jest-transformer-svg
bun add jest-transformer-svg
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2025-01-15 |
| First published | 2021-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Em-Ant |
| Maintainers | em-ant |
| Keywords | test, jest, svg, react, transformer |

## Links

- npm: https://www.npmjs.com/package/jest-transformer-svg
- Repository: https://github.com/Em-Ant/jest-transformer-svg
- Homepage: https://github.com/Em-Ant/jest-transformer-svg.git#readme
- Issues: https://github.com/Em-Ant/jest-transformer-svg.git/issues
- npm.io page: https://npm.io/package/jest-transformer-svg

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2025-01-15
- 2.0.2 — 2023-12-25
- 2.0.1 — 2023-04-06
- 2.0.0 — 2022-05-28
- 1.0.2 — 2021-12-26
- 1.0.1 — 2021-07-10
- 1.0.0 — 2021-07-10

## README

# jest-transformer-svg

Transform svg files for for jest+react to de-clutter snapshots.

**NOTE:** cloned from [jest-svg-transformer](https://www.npmjs.com/package/jest-svg-transformer)
since it looks unmaintained, and it doesn't support Jest versions >= 27.

**the latest version supports jest 28 - please use v1 for jest 27**

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:

```js
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:

```json
{
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest",
      "^.+\\.svg$": "jest-transformer-svg"
    }
  }
}
```

---
_Source: https://npm.io/package/jest-transformer-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._