{"id":13623024,"url":"https://github.com/jest-community/snapshot-diff","last_synced_at":"2025-05-15T11:06:07.044Z","repository":{"id":23265861,"uuid":"98574889","full_name":"jest-community/snapshot-diff","owner":"jest-community","description":"Diffing snapshot utility for Jest","archived":false,"fork":false,"pushed_at":"2025-04-29T00:09:32.000Z","size":2175,"stargazers_count":606,"open_issues_count":17,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-09T04:01:46.015Z","etag":null,"topics":["jest","react","snapshot","snapshot-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jest-community.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-27T19:54:39.000Z","updated_at":"2025-04-07T22:10:39.000Z","dependencies_parsed_at":"2024-01-19T03:24:05.005Z","dependency_job_id":"f22cefcc-e10f-4079-982a-d0dde3216c6a","html_url":"https://github.com/jest-community/snapshot-diff","commit_stats":{"total_commits":225,"total_committers":19,"mean_commits":"11.842105263157896","dds":0.6355555555555555,"last_synced_commit":"d8be89d57c5937991e577070baa83c9cf347ba38"},"previous_names":["thymikee/snapshot-diff"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jest-community%2Fsnapshot-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jest-community%2Fsnapshot-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jest-community%2Fsnapshot-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jest-community%2Fsnapshot-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jest-community","download_url":"https://codeload.github.com/jest-community/snapshot-diff/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","react","snapshot","snapshot-testing"],"created_at":"2024-08-01T21:01:27.165Z","updated_at":"2025-05-15T11:06:06.986Z","avatar_url":"https://github.com/jest-community.png","language":"JavaScript","funding_links":[],"categories":["Packages","JavaScript","Commit hooks"],"sub_categories":["Snapshot","Server-rendered React"],"readme":"# snapshot-diff\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/jest-community/snapshot-diff.svg)](https://greenkeeper.io/)\n[![npm version](https://badge.fury.io/js/snapshot-diff.svg)](https://badge.fury.io/js/snapshot-diff)\n\nDiffing snapshot utility for Jest. Takes two values, and return their difference as a string, ready to be snapshotted with `toMatchSnapshot()`.\nEspecially helpful when testing the difference between different React component states.\n\n## Installation\n\n```bash\nyarn add --dev snapshot-diff\n```\n\n## Usage\n\n#### With default jest matcher\n\n```js\nconst snapshotDiff = require('snapshot-diff');\n\ntest('snapshot difference between 2 strings', () =\u003e {\n  expect(snapshotDiff(a, b)).toMatchSnapshot();\n});\n\nconst React = require('react');\nconst Component = require('./Component');\n\ntest('snapshot difference between 2 React components state', () =\u003e {\n  expect(\n    snapshotDiff(\u003cComponent test=\"say\" /\u003e, \u003cComponent test=\"my name\" /\u003e)\n  ).toMatchSnapshot();\n});\n```\n\n#### With custom matcher\n\n```js\nconst { toMatchDiffSnapshot } = require('snapshot-diff');\n\nexpect.extend({ toMatchDiffSnapshot });\n\ntest('snapshot difference between 2 strings', () =\u003e {\n  expect(a).toMatchDiffSnapshot(b);\n});\n\nconst React = require('react');\nconst Component = require('./Component');\n\ntest('snapshot difference between 2 React components state', () =\u003e {\n  expect(\u003cComponent test=\"say\" /\u003e).toMatchDiffSnapshot(\n    \u003cComponent test=\"my name\" /\u003e\n  );\n});\n```\n\n... alternatively import it once, for instance in your [tests setup file](https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array):\n\n```js\nrequire('snapshot-diff/extend-expect');\n```\n\nProduced snapshot:\n\n```diff\nexports[`snapshot difference between 2 strings 1`] = `\n\"- First value\n+ Second value\n\n\n-  abcx\n+  abcy\n   \"\n`;\n\nexports[`snapshot difference between 2 React components state 1`] = `\n\"- \u003cComponent test=\\\\\"say\\\\\" /\u003e\n+ \u003cComponent test=\\\\\"my name\\\\\" /\u003e\n\n@@ -27,11 +27,11 @@\n   \u003cspan /\u003e\n   \u003cspan /\u003e\n   \u003cspan /\u003e\n   \u003cspan /\u003e\n   \u003cspan\u003e\n-    say\n+    my name\n   \u003c/span\u003e\n   \u003cspan /\u003e\n   \u003cspan /\u003e\n   \u003cspan /\u003e\n   \u003cspan /\u003e\"\n`;\n```\n\n## Custom serializers\n\nBy default, `snapshot-diff` uses a built in React serializer based on `react-test-renderer`. The\n[serializers](https://jestjs.io/docs/en/configuration#snapshotserializers-array-string) used can be set by calling\n`setSerializers` with an array of serializers to use. The order of serializers in this array may be important to you as\nserializers are tested in order until a match is found.\n\n`setSerializers` can be used to add new serializers for unsupported data types, or to set a different serializer\nfor React components. If you want to keep the default React serializer in place, don't forget to add the default\nserializers to your list of serializers!\n\n### Adding a new custom serializer\n\n```js\nconst snapshotDiff = require('snapshot-diff');\nconst myCustomSerializer = require('./my-custom-serializer');\n\nsnapshotDiff.setSerializers([\n  ...snapshotDiff.defaultSerializers, // use default React serializer - add this if you want to serialise React components!\n  myCustomSerializer\n]);\n```\n\n### Serializing React components with a different serializer\n\nYou can replace the default React serializer by omitting it from the serializer list. The following uses enzymes to-json\nserializer instead:\n\n```js\nconst snapshotDiff = require('snapshot-diff');\nconst enzymeToJson = require('enzyme-to-json/serializer');\nconst myCustomSerializer = require('./my-custom-serializer');\n\nsnapshotDiff.setSerializers([\n  enzymeToJson, // using enzymes serializer instead\n  myCustomSerializer\n]);\n```\n\n## Snapshot serializer\n\nBy default Jest adds extra quotes around strings so it makes diff snapshots of objects too noisy.\nTo fix this – `snapshot-diff` comes with custom serializer, which you can add directly in your tests or in `setupFiles` script:\n\n```js\nconst snapshotDiff = require('snapshot-diff');\n\nexpect.addSnapshotSerializer(snapshotDiff.getSnapshotDiffSerializer());\n\ntest('snapshot difference between 2 objects', () =\u003e {\n  expect(snapshotDiff({ foo: 'bar' }, { foo: 'baz' })).toMatchSnapshot();\n});\n```\n\n...or add it globally to your jest config:\n\n```js\n// jest.config.js\nmodule.exports = {\n  snapshotSerializers: [\n    require.resolve('snapshot-diff/serializer.js'),\n  ],\n};\n```\n\n## API\n\n```js\ntype Options = {\n  expand?: boolean,\n  colors?: boolean,\n  contextLines?: number\n};\n\n// default export\nsnapshotDiff(valueA: any, valueB: any, options?: Options) =\u003e string\n// custom matcher\nexpect(valueA: any).toMatchDiffSnapshot(valueB: any, options?: Options, testName?: string) =\u003e void\n```\n\n### Options\n\n- `expand: boolean` (default: `false`) – expand the diff, so the whole information is preserved\n- `colors: boolean` (default: `false`) – preserve color information from Jest diff\n- `contextLines: number` (default: 5) - number of context lines to be shown at the beginning and at the end of a snapshot\n- `stablePatchmarks: boolean` (default: `false`) - prevent line number patch marks from appearing in\ndiffs. This can be helpful when diffs are breaking only because of the patch marks. Changes `@@ -1,1 +1,2 @@` to `@@ --- --- @@`.\n- `aAnnotation: string` (default: `'First Value'`) - the annotation indicating from which serialization the `-` lines are\n- `bAnnotation: string` (default: `'Second Value'`) - the annotation indicating from which serialization the `+` lines are\n\n---\n\nProject is MIT-licensed. Pull Requests welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjest-community%2Fsnapshot-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjest-community%2Fsnapshot-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjest-community%2Fsnapshot-diff/lists"}