{"id":12254,"library":"typescript-snapshots-plugin","title":"TypeScript Snapshots Language Service Plugin","description":"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.","status":"active","version":"1.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/asvetliakov/typescript-snapshots-plugin","tags":["javascript","Jest","snapshots","Typescript","plugin"],"install":[{"cmd":"npm install typescript-snapshots-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add typescript-snapshots-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add typescript-snapshots-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the plugin to hook into the TypeScript Language Service.","package":"typescript","optional":false},{"reason":"Functions as the primary test runner for generating and managing snapshot files that this plugin enhances.","package":"jest","optional":true}],"imports":[],"quickstart":{"code":"{\n  \"name\": \"my-snapshot-project\",\n  \"version\": \"1.0.0\",\n  \"devDependencies\": {\n    \"jest\": \"^29.0.0\",\n    \"ts-jest\": \"^29.0.0\",\n    \"typescript\": \"^5.0.0\",\n    \"typescript-snapshots-plugin\": \"^1.7.0\"\n  },\n  \"scripts\": {\n    \"test\": \"jest\"\n  }\n}\n\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"target\": \"es2018\",\n    \"module\": \"commonjs\",\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true,\n    \"forceConsistentCasingInFileNames\": true\n  },\n  \"include\": [\n    \"src/**/*\"\n  ],\n  \"plugins\": [{\n    \"name\": \"typescript-snapshots-plugin\",\n    \"useJSTagsForSnapshotHover\": true // Enable for better VSCode markdown rendering\n  }]\n}\n\n// src/my-component.test.ts\nimport { test, expect, describe } from '@jest/globals';\n\ndescribe('MyComponent rendering', () => {\n  test('should match the snapshot', () => {\n    const data = {\n      id: 123,\n      name: 'Example Component',\n      settings: {\n        theme: 'dark',\n        fontSize: 14\n      }\n    };\n    // Hover over 'toMatchSnapshot' to see the snapshot content inline.\n    // Go to Definition (F12) on 'toMatchSnapshot' to navigate to the .snap file.\n    expect(data).toMatchSnapshot();\n  });\n\n  const componentName = 'DynamicWidget'; // Must be a constant for dynamic names\n  test(`renders a ${componentName} correctly`, () => {\n    const widgetData = { type: componentName, config: { enabled: true } };\n    expect(widgetData).toMatchSnapshot();\n  });\n});\n\n// To ensure the plugin works in VSCode:\n// 1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).\n// 2. Search for \"TypeScript: Select TypeScript Version...\".\n// 3. Choose \"Use Workspace Version\" to ensure VSCode uses your project's TypeScript compiler.","lang":"typescript","description":"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."},"warnings":[{"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'.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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\"`.","cause":"The plugin package is not installed, or 'typescript' is not installed, or the plugin entry in 'tsconfig.json' is incorrect.","error":"Language service plugin 'typescript-snapshots-plugin' was not found."},{"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'.","cause":"VSCode (or other IDE) is not using the workspace's TypeScript version, or the plugin is not correctly loaded/configured.","error":"Hovering over `toMatchSnapshot()` does not show snapshot content, or 'Go to Definition' does not work."}],"ecosystem":"npm"}