
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
chai-jest-snapshot
Advanced tools
Chai assertion for jest-snapshot. See Jest 14.0: React Snapshot Testing for background knowledge about snapshot testing.
On the command line:
$ npm install --save-dev chai-jest-snapshot
There are four different ways to use chai-jest-snapshot.
If you are using mocha as your test runner, it is recommended to use chai-jest-snapshot in "mocha configuration mode".
Note: do not use an arrow function for the beforeEach
as these will not receive the correct this
value provided by mocha.
In your test setup file:
import chai from "chai";
import chaiJestSnapshot from "chai-jest-snapshot";
chai.use(chaiJestSnapshot);
before(function() {
chaiJestSnapshot.resetSnapshotRegistry();
});
beforeEach(function() {
chaiJestSnapshot.configureUsingMochaContext(this);
});
In your spec file(s) (as an example):
import React from "react";
import renderer from "react-test-renderer";
import { expect } from "chai";
import Link from "./Link";
describe("Link", function() {
it("renders correctly", () => {
const tree = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
).toJSON();
expect(tree).to.matchSnapshot();
});
});
This will automatically write snapshots to a file with the same name as your test file, with .snap
added to the end.
This will also choose snapshot names based on the test name, adding a number to the end based on the number of times matchSnapshot
was called in each test (similar to jest).
In this mode, to update a single snapshot, you can pass true
as an argument to matchSnapshot
:
expect(tree).to.matchSnapshot(true);
If you want to update all snapshots without adding true
to each one, set the environment variable CHAI_JEST_SNAPSHOT_UPDATE_ALL
to "true":
# assuming `npm test` runs your tests:
# sh/bash/zsh
$ CHAI_JEST_SNAPSHOT_UPDATE_ALL=true npm test
# fish
$ env CHAI_JEST_SNAPSHOT_UPDATE_ALL=true npm test
This behaves similarly to running jest -u
.
If you want tests to fail when a snapshot is missing (instead of writing a new one), set the environment variable CI
to "true":
# assuming `npm test` runs your tests:
# sh/bash/zsh
$ CI=true npm test
# fish
$ env CI=true npm test
This behaves similarly to running jest --ci
.
If you are using Jest, but prefer Chai assertions, you don’t have anything to configure except loading the plugin itself: the matchSnapshot
Chai assertion will automatically delegate to Jest’s built-in snapshot capability, so all usual options, settings, CLI flags, method arguments, etc. will work out of the box.
import chai from "chai";
import chaiJestSnapshot from "chai-jest-snapshot";
chai.use(chaiJestSnapshot);
If you are using neither mocha nor Jest as your test runner, it is recommended to use chai-jest-snapshot in "framework-agnostic configuration mode".
In your test setup file:
import chai from "chai";
import chaiJestSnapshot from "chai-jest-snapshot";
chai.use(chaiJestSnapshot);
before(function() {
// In order for watch mode to work correctly, the snapshot registry needs to
// be reset at the beginning of each suite run. In mocha, `before` callbacks
// are called before the whole suite runs, but in other test runners you may
// need to run this somewhere else; for example, in jasmine, you'd put it in a
// `beforeAll` instead of `before`.
chaiJestSnapshot.resetSnapshotRegistry();
});
In your spec file(s) (as an example):
import React from "react";
import renderer from "react-test-renderer";
import { expect } from "chai";
import Link from "./Link";
describe("Link", function() {
beforeEach(function() {
chaiJestSnapshot.setFilename(__filename + ".snap");
});
it("renders correctly", () => {
// There may be a way to automate this in your test runner; for example,
// getting the test name in the beforeEach callback, or using a custom
// reporter to hook into the test lifecycle.
chaiJestSnapshot.setTestName("Link renders correctly");
const tree = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
).toJSON();
expect(tree).to.matchSnapshot();
});
});
This will write snapshots to the file name you specify, (in this example, a file with the same name and location as the spec file, but with .snap
added to the end).
This will use whatever snapshot name you specify as a template, adding a number to the end based on the number of times matchSnapshot
was called using the same file name and snapshot name (similar to what jest does).
In this mode, to update a single snapshot, you can pass true
as an argument to matchSnapshot
:
expect(tree).to.matchSnapshot(true);
If you want to update all snapshots without adding true
to each one, set the environment variable CHAI_JEST_SNAPSHOT_UPDATE_ALL
to "true":
# assuming `npm test` runs your tests:
# sh/bash/zsh
$ CHAI_JEST_SNAPSHOT_UPDATE_ALL=true npm test
# fish
$ env CHAI_JEST_SNAPSHOT_UPDATE_ALL=true npm test
This behaves similarly to running jest -u
.
If you want tests to fail when a snapshot is missing (instead of writing a new one), set the environment variable CI
to "true":
# assuming `npm test` runs your tests:
# sh/bash/zsh
$ CI=true npm test
# fish
$ env CI=true npm test
This behaves similarly to running jest --ci
.
If Mocha Configuration Mode or Framework-agnostic Configuration Mode do not satisfy your needs, you can use "manual mode".
In your test setup file:
import chai from "chai";
import chaiJestSnapshot from "chai-jest-snapshot";
chai.use(chaiJestSnapshot);
In your spec file(s) (as an example):
import React from "react";
import renderer from "react-test-renderer";
import { expect } from "chai";
import Link from "./Link";
describe("Link", function() {
it("renders correctly", () => {
const tree = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
).toJSON();
let snapshotFilename = __filename + ".snap";
let snapshotName = "Link renders correctly";
expect(tree).to.matchSnapshot(snapshotFilename, snapshotName);
});
});
This will write snapshots to the file name you specify, (in this example, a file with the same name and location as the spec file, but with .snap
added to the end).
This will use whatever snapshot name you specify as the snapshot name. NOTE: unlike other modes, this mode does not add a number to the end of the snapshot name.
In this mode, to update a single snapshot, you can pass true
as an extra, third argument to matchSnapshot
:
expect(tree).to.matchSnapshot(snapshotFilename, snapshotName, true);
If you want to update all snapshots without adding true
to each one, set the environment variable CHAI_JEST_SNAPSHOT_UPDATE_ALL
to "true":
# assuming `npm test` runs your tests:
# sh/bash/zsh
$ CHAI_JEST_SNAPSHOT_UPDATE_ALL=true npm test
# fish
$ env CHAI_JEST_SNAPSHOT_UPDATE_ALL=true npm test
This behaves similarly to running jest -u
.
If you want tests to fail when a snapshot is missing (instead of writing a new one), set the environment variable CI
to "true":
# assuming `npm test` runs your tests:
# sh/bash/zsh
$ CI=true npm test
# fish
$ env CI=true npm test
This behaves similarly to running jest --ci
.
__filename
or __dirname
in your snapshot file names, and compile your tests using babel, you will probably want to use babel-plugin-transform-dirname-filename to ensure your snapshots end up in your source directory instead of the directory where your tests were built (ie dist
or build
).$ npm install
$ npm test
Pull Requests and Issues welcome
FAQs
Chai assertion that provides Jest's snapshot testing
The npm package chai-jest-snapshot receives a total of 0 weekly downloads. As such, chai-jest-snapshot popularity was classified as not popular.
We found that chai-jest-snapshot demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.