typescript-snapshots-plugin

{ "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.