TypeScript Snapshots Language Service Plugin

1.7.0 · active · verified Sun Apr 19

The `typescript-snapshots-plugin` enhances the TypeScript language service to provide deep IDE support for Jest or similar snapshot testing frameworks. It integrates features directly into the editor, such as displaying snapshot content on quick info (hover) for `toMatchSnapshot` calls and enabling "Go to Definition" navigation from the test call to its corresponding `.snap` file. The plugin also supports dynamically constructed test names, albeit currently limited to constant expressions for accurate linking. It is installed as a development dependency and configured within the `plugins` array of your `tsconfig.json`. The current stable version is 1.7.0, indicating active maintenance and development. Its key differentiator is streamlining the snapshot testing workflow by bringing snapshot content and navigation directly into the TypeScript editor experience, reducing context switching and improving developer productivity.

Common errors

```
Language service plugin 'typescript-snapshots-plugin' was not found.
```
cause The plugin package is not installed, or 'typescript' is not installed, or the plugin entry in 'tsconfig.json' is incorrect.

fix Ensure `npm install typescript-snapshots-plugin typescript --save-dev` has been run and verify the `plugins` array in `tsconfig.json` correctly references `"name": "typescript-snapshots-plugin"`.
```
Hovering over `toMatchSnapshot()` does not show snapshot content, or 'Go to Definition' does not work.
```
cause VSCode (or other IDE) is not using the workspace's TypeScript version, or the plugin is not correctly loaded/configured.

fix Verify that your IDE is configured to use the TypeScript version installed in your project's `node_modules`. For VSCode, use 'TypeScript: Select TypeScript Version...' from the Command Palette and choose 'Use Workspace Version'.

Warnings

gotcha When using VSCode, it is crucial to configure the editor to use the workspace's TypeScript version instead of its bundled one. Otherwise, the plugin may not activate or function correctly.
Fix: In VSCode, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P), search for 'TypeScript: Select TypeScript Version...', and choose 'Use Workspace Version'.
gotcha The plugin's ability to link dynamically constructed test names to snapshots is currently limited. Test names containing non-constant expressions may not be correctly resolved for hover or navigation features.
Fix: Ensure that any parts of your `test()` or `it()` block descriptions that contribute to the snapshot name are defined as constants within the scope of the test file.

Install

npm install typescript-snapshots-plugin npm
yarn add typescript-snapshots-plugin yarn
pnpm add typescript-snapshots-plugin pnpm

Quickstart

Demonstrates `typescript-snapshots-plugin` setup in `package.json` and `tsconfig.json`, with a sample Jest test file. Highlights hover-to-view and go-to-definition features, and configures VSCode for optimal plugin usage.

{
  "name": "my-snapshot-project",
  "version": "1.0.0",
  "devDependencies": {
    "jest": "^29.0.0",
    "ts-jest": "^29.0.0",
    "typescript": "^5.0.0",
    "typescript-snapshots-plugin": "^1.7.0"
  },
  "scripts": {
    "test": "jest"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "plugins": [{
    "name": "typescript-snapshots-plugin",
    "useJSTagsForSnapshotHover": true // Enable for better VSCode markdown rendering
  }]
}

// src/my-component.test.ts
import { test, expect, describe } from '@jest/globals';

describe('MyComponent rendering', () => {
  test('should match the snapshot', () => {
    const data = {
      id: 123,
      name: 'Example Component',
      settings: {
        theme: 'dark',
        fontSize: 14
      }
    };
    // Hover over 'toMatchSnapshot' to see the snapshot content inline.
    // Go to Definition (F12) on 'toMatchSnapshot' to navigate to the .snap file.
    expect(data).toMatchSnapshot();
  });

  const componentName = 'DynamicWidget'; // Must be a constant for dynamic names
  test(`renders a ${componentName} correctly`, () => {
    const widgetData = { type: componentName, config: { enabled: true } };
    expect(widgetData).toMatchSnapshot();
  });
});

// To ensure the plugin works in VSCode:
// 1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
// 2. Search for "TypeScript: Select TypeScript Version...".
// 3. Choose "Use Workspace Version" to ensure VSCode uses your project's TypeScript compiler.

view raw JSON →