Write Snapshots testing without Jest
Tags: testing, node, javascript
Published: 2019-01-19 02:15:07

---
title: "Write Snapshots testing without Jest"
published: true
description: How to write snapshots testing without any testing framework
tags: testing,node.js,JavaScript

---

[Jest](https://github.com/facebook/jest "Jest") is useful tool for snapshot testing. Snapshot testing is used in many library.
For example, [prettier](https://github.com/prettier/prettier) use snapshot testings.

- [Snapshot Testing · Jest](https://jestjs.io/docs/en/snapshot-testing)

I want to write snapshots testing without Jest.
In such a case, I often use following template code.

## Write snapshot testing

For example, following code work on [Mocha](https://mochajs.org/).

- Input: json
- Ouput: json

`snapshot-test.js`:

```js
const fs = require("fs");
const path = require("path");
const assert = require("assert");
const fixturesDir = path.join(__dirname, "snapshots");
// TODO: your transform function
const transform = require("../transform");

describe("Snapshot testing", () => {
  fs.readdirSync(fixturesDir)
    .map(caseName => {
      const normalizedTestName = caseName.replace(/-/g, " ");
      it(`Test ${normalizedTestName}`, function() {
        const fixtureDir = path.join(fixturesDir, caseName);
        const actualFilePath = path.join(fixtureDir, "input.json");
        const actualContent = JSON.parse(fs.readFileSync(actualFilePath, "utf-8"));
        const actual = transform(actualContent);
        const expectedFilePath = path.join(fixtureDir, "output.json");
        // Usage: update snapshots
        // UPDATE_SNAPSHOT=1 npm test
        if (!fs.existsSync(expectedFilePath) || process.env.UPDATE_SNAPSHOT) {
          fs.writeFileSync(expectedFilePath, JSON.stringify(actual, null, 4));
          this.skip(); // skip when updating snapshots - Mocha's function
          return;
        }
        // compare input and output
        const expected = JSON.parse(fs.readFileSync(expectedFilePath, "utf-8"));
        assert.deepStrictEqual(
          actual,
          expected,
          `
${fixtureDir}
${JSON.stringify(actual)}
`
        );
      });
    });
});
```

### Setup snapshot input file

Create each test case directory to  `fixturesDir` and put `input.json` as input  and `output.json` as output into the test case directory.

```
├── snapshot-test.js
└── snapshots
    ├── TEST_CASE_NAME_1
    │   ├── input.json
    │   └── output.json
    └── TEST_CASE_NAME_2
        ├── input.json
        └── output.json
```

### Create output.json(snapshot) from input.json

Snapshot testing create output file(snapshot) from input file(`input.json`).
It is advantage to use snapshot testing.

Run the test code with `UPDATE_SNAPSHOT=1` enviroment variable and then create `output.json` into each test case directory.

```
UPDATE_SNAPSHOT=1 npm test
```

If You have checked the snapshot file(`output.json`) and it is valid, commit the snapshot file.

Next, You can check the snapshot via Running `npm test`:

```
npm test 
```

## Conclustion

I have used the above snapshot testing pattern.
Snapshot testing is easy to increase test case by putting input case .

Examples:

- [sentence-splitter/fixtures-test.ts at master · azu/sentence-splitter](https://github.com/azu/sentence-splitter/blob/master/test/fixtures-test.ts)
    - Use parsed JSON as snapshot
- [ecmascript-proposals-json/snapshot-test.js at master · azu/ecmascript-proposals-json](https://github.com/azu/ecmascript-proposals-json/blob/master/test/snapshot-test.js)
    - Use scrapted HTML as snapshot
- [textlint/parsing-test.js at master · textlint/textlint](https://github.com/textlint/textlint/blob/master/packages/%40textlint/markdown-to-ast/test/parsing-test.js "textlint/parsing-test.js at master · textlint/textlint")
    - Use parsed Markdown AST as snapshot
- [comment-to-assert/snapshot-test.ts at master · azu/comment-to-assert](https://github.com/azu/comment-to-assert/blob/master/test/snapshot-test.ts)
    - Use transformed JS code as snapshot