Skip to content

feat: add testName to toMatchDiffSnapshot #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 21 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Diffing snapshot utility for Jest. Takes two values, and return their difference
Especially helpful when testing the difference between different React component states.

## Installation

```bash
yarn add --dev snapshot-diff
```
Expand All @@ -18,7 +19,7 @@ yarn add --dev snapshot-diff
```js
const snapshotDiff = require('snapshot-diff');

test('snapshot difference between 2 strings', () => {
test('snapshot difference between 2 strings', () => {
expect(snapshotDiff(a, b)).toMatchSnapshot();
});

Expand All @@ -27,10 +28,7 @@ const Component = require('./Component');

test('snapshot difference between 2 React components state', () => {
expect(
snapshotDiff(
<Component test="say" />,
<Component test="my name" />
)
snapshotDiff(<Component test="say" />, <Component test="my name" />)
).toMatchSnapshot();
});
```
Expand All @@ -42,24 +40,20 @@ const { toMatchDiffSnapshot } = require('snapshot-diff');

expect.extend({ toMatchDiffSnapshot });

test('snapshot difference between 2 strings', () => {
test('snapshot difference between 2 strings', () => {
expect(a).toMatchDiffSnapshot(b);
});

const React = require('react');
const Component = require('./Component');

test('snapshot difference between 2 React components state', () => {
expect(
<Component test="say" />
).toMatchDiffSnapshot(
test('snapshot difference between 2 React components state', () => {
expect(<Component test="say" />).toMatchDiffSnapshot(
<Component test="my name" />
);
);
});
```



Produced snapshot:

```diff
Expand Down Expand Up @@ -95,26 +89,28 @@ exports[`snapshot difference between 2 React components state 1`] = `

## Snapshot serializer

By default Jest adds extra quotes around strings so it makes diff snapshots of objects too noisy.
By default Jest adds extra quotes around strings so it makes diff snapshots of objects too noisy.
To fix this – `snapshot-diff` comes with custom serializer, which you can add directly in your tests or in `setupFiles` script:

```js
const snapshotDiff = require('snapshot-diff');

expect.addSnapshotSerializer(snapshotDiff.getSnapshotDiffSerializer());

test('snapshot difference between 2 objects', () => {
test('snapshot difference between 2 objects', () => {
expect(snapshotDiff({ foo: 'bar' }, { foo: 'baz' })).toMatchSnapshot();
});
```

...or add it globally to your jest config:

```json
"jest": {
"snapshotSerializers": [
"<rootDir>/node_modules/snapshot-diff/serializer.js"
]
{
"jest": {
"snapshotSerializers": [
"<rootDir>/node_modules/snapshot-diff/serializer.js"
]
}
}
```

Expand All @@ -130,16 +126,16 @@ type Options = {
// default export
snapshotDiff(valueA: any, valueB: any, options?: Options) => string
// custom matcher
expect(valueA: any).toMatchDiffSnapshot(valueB: any, options?: Options) => void
expect(valueA: any).toMatchDiffSnapshot(valueB: any, options?: Options, testName?: string) => void
```

### Options
* `expand: boolean` (default: `false`) – expand the diff, so the whole information is preserved
* `colors: boolean` (default: `false`) – preserve color information from Jest diff
* `contextLines: number` (default: 5) - number of context lines to be shown at the beginning and at the end of a snapshot
* `aAnnotation: string` (default: `'First Value'`) - the annotation indicating from which serialization the `-` lines are
* `bAnnotation: string` (default: `'Second Value'`) - the annotation indicating from which serialization the `+` lines are

- `expand: boolean` (default: `false`) – expand the diff, so the whole information is preserved
- `colors: boolean` (default: `false`) – preserve color information from Jest diff
- `contextLines: number` (default: 5) - number of context lines to be shown at the beginning and at the end of a snapshot
- `aAnnotation: string` (default: `'First Value'`) - the annotation indicating from which serialization the `-` lines are
- `bAnnotation: string` (default: `'Second Value'`) - the annotation indicating from which serialization the `+` lines are

---

Expand Down
18 changes: 18 additions & 0 deletions __tests__/__snapshots__/toMatchDiffSnapshot.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,24 @@ exports[`proxies "expand" option(s) 1`] = `
"
`;

exports[`works with custom name: slim 1`] = `
"Snapshot Diff:
- First value
+ Second value

@@ -5,9 +5,10 @@
some
some
some
some
not
+ so
very
long
script
"
`;

exports[`works with default options 1`] = `
"Snapshot Diff:
- First value
Expand Down
5 changes: 5 additions & 0 deletions __tests__/toMatchDiffSnapshot.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,3 +47,8 @@ test('works with default options', () => {
});
}
);

test('works with custom name', () => {
// $FlowFixMe
expect(a).toMatchDiffSnapshot(b, {}, 'slim');
});
4 changes: 2 additions & 2 deletions index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ declare namespace jest {
* Compare the difference between the actual in the `expect()`
* vs the object inside `valueB` with some extra options.
*/
toMatchDiffSnapshot(valueB: any, options?: DiffOptions): R
toMatchDiffSnapshot(valueB: any, options?: DiffOptions, testName?: string): R
}
}

Expand All @@ -30,7 +30,7 @@ declare module "snapshot-diff" {
*/
toMatchDiffSnapshot: jest.CustomMatcher
/**
* By default Jest adds extra quotes around strings so it makes diff
* By default Jest adds extra quotes around strings so it makes diff
* snapshots of objects too noisy. To fix this – snapshot-diff comes
* with custom serializer.
*/
Expand Down
9 changes: 7 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,15 @@ function diffReactComponents(valueA: any, valueB: any, options: Options) {
});
}

function toMatchDiffSnapshot(valueA: any, valueB: any, options?: Options) {
function toMatchDiffSnapshot(
valueA: any,
valueB: any,
options?: Options,
testName?: string
) {
const difference = snapshotDiff(valueA, valueB, options);

return snapshot.toMatchSnapshot.call(this, difference);
return snapshot.toMatchSnapshot.call(this, difference, testName);
}

function getSnapshotDiffSerializer() {
Expand Down