# chai-jest-snapshot

> Chai assertion that provides Jest's snapshot testing

Latest version **2.0.0** (published 2017-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install chai-jest-snapshot
pnpm add chai-jest-snapshot
yarn add chai-jest-snapshot
bun add chai-jest-snapshot
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-11-07 |
| First published | 2016-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/chai-jest-snapshot) |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 104 |
| Author | Stephen Scott |
| Maintainers | suchipi |
| Keywords | mocha, chai, assertion, helper, jest, snapshot, react, test, spec, testing |

## Links

- npm: https://www.npmjs.com/package/chai-jest-snapshot
- Repository: https://github.com/suchipi/chai-jest-snapshot
- Homepage: https://github.com/suchipi/chai-jest-snapshot#readme
- Issues: https://github.com/suchipi/chai-jest-snapshot/issues
- npm.io page: https://npm.io/package/chai-jest-snapshot

## Dependencies (2)

- [jest-snapshot](https://npm.io/package/jest-snapshot.md) 21.2.1
- [lodash.values](https://npm.io/package/lodash.values.md) ^4.3.0

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2017-11-07
- 1.3.0 — 2017-07-14
- 1.2.2 — 2017-06-26
- 1.2.1 — 2017-06-25
- 1.2.0 — 2017-06-25
- 1.1.0 — 2017-06-17
- 1.0.0 — 2017-06-03
- 0.4.0 — 2017-06-03
- 0.3.0 — 2017-04-08
- 0.2.1 — 2016-09-14
- 0.2.0 — 2016-09-11
- 0.1.3 — 2016-09-11
- 0.1.2 — 2016-08-04
- 0.1.1 — 2016-07-31
- 0.1.0 — 2016-07-31

## README

# chai-jest-snapshot

Chai assertion for [jest-snapshot](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
See [Jest 14.0: React Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) for background knowledge about snapshot testing.

## Installation
On the command line:
```
$ npm install --save-dev chai-jest-snapshot
```

## Usage
There are four different ways to use chai-jest-snapshot.

### Mocha Configuration Mode (Recommended for Mocha Users)
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:
```js
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):
```js
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`:
```js
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":
```shell
# 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":
```shell
# 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`.

### Jest Configuration Mode (Recommended for Jest Users)

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.

```js
import chai from "chai";
import chaiJestSnapshot from "chai-jest-snapshot";

chai.use(chaiJestSnapshot);
```

### Framework-agnostic Configuration Mode (Recommended for Non-Mocha/Jest Users)

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:
```js
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):
```js
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`:
```js
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":
```shell
# 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":
```shell
# 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`.

### Manual Mode
If Mocha Configuration Mode or Framework-agnostic Configuration Mode do not satisfy your needs, you can use "manual mode".

In your test setup file:
```js
import chai from "chai";
import chaiJestSnapshot from "chai-jest-snapshot";

chai.use(chaiJestSnapshot);
```

In your spec file(s) (as an example):
```js
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`:
```js
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":
```shell
# 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":
```shell
# 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`.

## Tips
* If you are referencing `__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](https://github.com/TooTallNate/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`).

## Contributing
```
$ npm install
$ npm test
```
Pull Requests and Issues welcome

---
_Source: https://npm.io/package/chai-jest-snapshot · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._