Typescript snapshots plugin

Language service support for viewing/navigating to your test snapshots


Snapshot content on quick info (hover):



Dynamically constructed test names (Constants only)



npm install typescript-snapshots-plugin --save-dev

yarn add typescript-snapshots-plugin --dev

Add to your tsconfig.json:

    "plugins": [{
        "name": "typescript-snapshots-plugin",

If you are using VScode, tell it to use your local project TS version instead the VSCode bundled one


In most cases you must be OK with default configuration. If it doesn't work for you, the plugin exposes few options:

snapshotCallIdentifiers List of snapshot matching call identifiers, such as toMatchSnapshot(), default:


testBlockIdentifiers List of test call identifiers, such as it(), or describe(), default:


snapshotFileExtensions List of snapshot names extensions. These will be used to search the snapshot file for test path. First existing path wins, default:

[ ".snap" ]

snapshotDir Snapshot directory relative to the test file, default:


useJSTagsForSnapshotHover Setting to true will render snapshot within fake jsdoc definition block. Since VSCode hover jsdoc supports markdown ```syntax``` the snapshot in hover widget will have slightly better syntax coloring. If you're using VSCode you may want to enable this, otherwise leave as false. Default: false

To pass your values, add them in tsconfig.json:

    "plugins": [{
        "name": "typescript-snapshots-plugin",
        "snapshotCallIdentifiers": [
        "testBlockIdentifiers": [

Typescript Snapshots Plugin

Snapshots language service support for Typescript

Typescript Snapshots Plugin Info

⭐ Stars 124
🔗 Source Code github.com
🕒 Last Update 9 months ago
🕒 Created 5 years ago
🐞 Open Issues 16
➗ Star-Issue Ratio 8
😎 Author asvetliakov