An open API service indexing awesome lists of open source software.

https://github.com/wldcordeiro/snapshot-diff-serializer

A serializer that lets you generate snapshot diffs between two values
https://github.com/wldcordeiro/snapshot-diff-serializer

javascript jest snapshot-testing snapshots testing

Last synced: 2 months ago
JSON representation

A serializer that lets you generate snapshot diffs between two values

Awesome Lists containing this project

README

          

# Snapshot Diff Serializer

This is a simple diffing utility for Jest that is inspired by [snapshot-diff](https://github.com/jest-community/snapshot-diff). The key difference here is that `snapshot-diff-serializer` only comes as a serializer and is agnostic of other serializers, meaning you get nice diffs with Enzyme, or other serializers applied (something that `snapshot-diff` doesn't do).

## Installation

```
# npm
npm install --dev snapshot-diff-serializer
# yarn
yarn add -D snapshot-diff-serializer
```

## Configuration

Add the serializer to your `snapshotSerializers` array in your Jest config (example using package.json)

```json
{
"jest": {
"snapshotSerializers": [
"jest-glamor-react",
"enzyme-to-json/serializer",
"/snapshot-diff-serializer"
],
},
}
```

## Usage

Here is an example of using this serializer:

```jsx
const Component = ({ foo, bar }) => (


{foo != null && foo}
{bar != null && bar}

)
```

```jsx
import { shallow } from 'enzyme'
// Test
describe('Component', () => {
test('variants', () => {
expect({
diffA: shallow(),
diffB: shallow(),
}).toMatchSnapshot()
})
})
```

The produced snapshot would look like this:

```
exports[`Component variants 1`] = `
- Diff A
+ Diff B


- 3
+ 5

`;
```