feat: add matcher

Author: unional

.changeset/early-spies-explode.md

@@ -0,0 +1,5 @@
+---
+"storybook-addon-vis": patch
+---
+
+Add `/matcher`.

packages/storybook-addon-vis/package.json

@@ -29,6 +29,10 @@
 			"import": "./dist/index.js",
 			"require": "./dist/index.cjs"
 		},
+		"./matcher": {
+			"types": "./dist/matcher.d.ts",
+			"import": "./dist/matcher.js"
+		},
 		"./preset": "./dist/preset.cjs",
 		"./preview": {
 			"types": "./dist/preview.d.ts",
@@ -116,6 +120,7 @@
 	"bundler": {
 		"exportEntries": [
 			"src/index.ts",
+			"src/matcher.ts",
 			"src/vitest-setup.ts"
 		],
 		"previewEntries": [

packages/storybook-addon-vis/readme.md

@@ -307,6 +307,24 @@ const config: StorybookConfig = {
 }
 ```
 
+### TypeScript Configuration
+
+The main usage of this addon is to use the `toMatchImageSnapshot` matcher.
+
+Since it is exposed under the `expect` object of `vitest` or `@storybook/test`,
+you typically do not need to import `storybook-addon-vis` directly.
+
+Because of this, TypeScript may not recognize the matcher.
+To address this, you can add the following to your `tsconfig.json`:
+
+```json
+{
+	"compilerOptions": {
+		"types": ["storybook-addon-vis/matcher"]
+	}
+}
+```
+
 ## Usage - automatic snapshot
 
 With the `auto` preset, [`storybook-addon-vis`][storybook-addon-vis] automatically captures image snapshot for stories with `snapshot` tag.

packages/storybook-addon-vis/src/client/storybook/expect_extend.ts

@@ -0,0 +1,5 @@
+import { expect } from '@storybook/test'
+import './augment.ts'
+import { toMatchImageSnapshot } from '../expect/to_match_image_snapshot.ts'
+
+expect.extend({ toMatchImageSnapshot })

packages/storybook-addon-vis/src/index.ts

@@ -1,4 +1,6 @@
 // `storybook-addon-vis` provides code that can be used in test files.
 export * from 'vitest-plugin-vis'
+import './client/storybook/expect_extend.ts'
+
 export * from './client/storybook/param.ts'
 export * from './client/has_image_snapshot.ts'

packages/storybook-addon-vis/src/matcher.ts

@@ -0,0 +1 @@
+import './client/storybook/expect_extend.ts'

packages/storybook-addon-vis/src/preview.ts

@@ -1,4 +1,4 @@
-import './preview/expect_extend.ts'
+import './client/storybook/expect_extend.ts'
 import { visAnnotations } from './preview/vis_annotation.ts'
 
 export default visAnnotations

packages/storybook-addon-vis/src/preview/expect_extend.ts

@@ -21,7 +21,7 @@
 		"noFallthroughCasesInSwitch": true,
 		"noUncheckedSideEffectImports": true,
 
-		"types": ["@testing-library/jest-dom"]
+		"types": ["storybook-addon-vis/matcher"]
 	},
 	"include": ["src"]
 }

testcases/react-vite-ts/tsconfig.app.json

@@ -1,6 +1,7 @@
 import { setProjectAnnotations } from '@storybook/react'
 import * as visAnnotations from 'storybook-addon-vis/preview'
 import { vis } from 'storybook-addon-vis/vitest-setup'
+
 import { beforeAll } from 'vitest'
 import * as projectAnnotations from './preview.ts'
 

testcases/themes/.storybook/vitest.setup.ts

@@ -0,0 +1,5 @@
+import { expect, it } from 'vitest'
+
+it('should have toMatchImageSnapshot', () => {
+	expect(expect('abc').toMatchImageSnapshot).toBeTypeOf('function')
+})

testcases/themes/src/vitest.test.ts

@@ -19,7 +19,8 @@
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
 		"noFallthroughCasesInSwitch": true,
-		"noUncheckedSideEffectImports": true
+		"noUncheckedSideEffectImports": true,
+		"types": ["storybook-addon-vis/matcher"]
 	},
 	"include": ["src"]
 }