Jest is useful tool for snapshot testing. Snapshot testing is used in many library.
For example, prettier use snapshot testings.
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.
- Input: json
- Ouput: json
snapshot-test.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
- Use parsed JSON as snapshot
-
ecmascript-proposals-json/snapshot-test.js at master · azu/ecmascript-proposals-json
- Use scrapted HTML as snapshot
-
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
- Use transformed JS code as snapshot
Top comments (0)