Awesome

Typescript snapshots plugin

Language service support for viewing/navigating to your test snapshots

Features

Snapshot content on quick info (hover):

Navigation to snapshot (Go to definition):

Dynamically constructed test names (Constants only)

Installation

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

Configuration

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:

[
    "toMatchSnapshot",
    "toThrowErrorMatchingSnapshot"
]

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

    "it",
    "it.only",
    "it.skip",
    "it.concurrent",
    "describe",
    "describe.only",
    "describe.skip",
    "context",
    "suite"

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:

"__snapshots__"

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": [
            "toMatchSnapshot",
            "myMatchSnapshot"
        ],
        "testBlockIdentifiers": [
            ...
        ]
    }]