npmpackage.info

Gathering detailed insights and metrics for @wldcordeiro-stuffz/snapshot-diff-serializer

@wldcordeiro-stuffz/snapshot-diff-serializer - 5.0.0 | npmpackage.info

@wldcordeiro-stuffz/snapshot-diff-serializer

5.0.0

4.60 kB

Installations

npm install @wldcordeiro-stuffz/snapshot-diff-serializer

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.15.0

NPM Version

lerna/3.10.5/node@v8.15.0+x64 (linux)

Releases

Unable to fetch releases

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

Maintainers

Package Meta Information

Latest Version

5.0.0

Package Id

@wldcordeiro-stuffz/snapshot-diff-serializer@5.0.0

Unpacked Size

4.60 kB

Size

2.33 kB

File Count

NPM Version

lerna/3.10.5/node@v8.15.0+x64 (linux)

Node Version

8.15.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

jest-diff strip-ansi

Peer Dependencies

jest

Snapshot Diff Serializer

This is a simple diffing utility for Jest that is inspired by 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)

1{
2  "jest": {
3    "snapshotSerializers": [
4      "jest-glamor-react",
5      "enzyme-to-json/serializer",
6      "<rootDir>/snapshot-diff-serializer"
7    ],
8  },
9}

Usage

Here is an example of using this serializer:

1const Component = ({ foo, bar }) => (
2  <div>
3    {foo != null && foo}
4    {bar != null && bar}
5  </div>
6)

1import { shallow } from 'enzyme'
2// Test
3describe('Component', () => {
4  test('variants', () => {
5    expect({
6      diffA: shallow(<Component foo={3} />),
7      diffB: shallow(<Component bar={5} />),
8      }).toMatchSnapshot()
9  })
10})

The produced snapshot would look like this:

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

  <div>
-   3
+   5
  </div>
`;

No vulnerabilities found.

No security vulnerabilities found.