add storybook snapshot

.storybook/jest.config.mjs

@@ -0,0 +1,12 @@
+import { config } from '../jest.config.mjs'
+
+export default {
+  ...config(),
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/../__mocks__/file.ts',
+    '\\.(styl|css|less|scss)$': '<rootDir>/../__mocks__/style.ts',
+    '\\.(mdx)$': '<rootDir>/../__mocks__/mdx.ts',
+  },
+  setupFilesAfterEnv: ['../jest.setup.ts', './jest.setup.ts'],
+}

.storybook/jest.setup.ts

@@ -0,0 +1,34 @@
+import { setProjectAnnotations } from '@storybook/react'
+
+import * as projectAnnotations from './preview'
+
+setProjectAnnotations(projectAnnotations)
+
+globalThis.location = {
+  ...globalThis.location,
+  search: '',
+}
+window.location = {
+  ...window.location,
+  search: '',
+}
+
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe() {
+    return null
+  },
+  disconnect() {
+    return null
+  },
+}))
+
+global.matchMedia = jest.fn().mockImplementation(() => ({
+  matches: true,
+  media: '(max-width: 600px)',
+  addEventListener() {
+    // Do Nothing
+  },
+  removeEventListener() {
+    // Do Nothing
+  },
+}))

.storybook/storybook.test.ts

@@ -0,0 +1,101 @@
+import path from 'path'
+import * as glob from 'glob'
+
+import { composeStories } from '@storybook/react'
+import renderer from 'react-test-renderer'
+import { addSerializer } from 'jest-specific-snapshot'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { styleSheetSerializer } from 'jest-styled-components'
+addSerializer(styleSheetSerializer)
+
+type StoryFile = {
+  default: Meta
+  [name: string]: StoryFn | Meta
+}
+
+const compose = (
+  entry: StoryFile
+): ReturnType<typeof composeStories<StoryFile>> => {
+  try {
+    return composeStories(entry)
+  } catch (e) {
+    throw new Error(
+      `There was an issue composing stories for the module: ${JSON.stringify(
+        entry
+      )}, ${e}`
+    )
+  }
+}
+
+function getAllStoryFiles() {
+  // Place the glob you want to match your stories files
+  const storyFiles = glob.sync(
+    path.join(__dirname, '../packages/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+  )
+
+  return storyFiles.map((filePath) => {
+    const storyFile = require(filePath)
+    return { filePath, storyFile }
+  })
+}
+
+// Recreate similar options to Storyshots. Place your configuration below
+const options = {
+  suite: 'Storybook Tests',
+  storyKindRegex: /^.*?DontTest$/,
+  storyNameRegex: /UNSET/,
+  snapshotsDirName: '__snapshots__',
+  snapshotExtension: '.storyshot',
+}
+
+describe(options.suite, () => {
+  getAllStoryFiles().forEach(({ storyFile, filePath }) => {
+    const meta = storyFile.default
+    const title = meta.title || filePath
+
+    if (
+      options.storyKindRegex.test(title) ||
+      meta.parameters?.storyshots?.disable
+    ) {
+      // Skip component tests if they are disabled
+      return
+    }
+
+    describe(title, () => {
+      const stories = Object.entries(compose(storyFile))
+        .map(([name, story]) => ({ name, story }))
+        .filter(({ name, story }) => {
+          // Implements a filtering mechanism to avoid running stories that are disabled via parameters or that match a specific regex mirroring the default behavior of Storyshots.
+          return (
+            !options.storyNameRegex.test(name) &&
+            !story.parameters.storyshots?.disable
+          )
+        })
+
+      if (stories.length <= 0) {
+        throw new Error(
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+        )
+      }
+
+      stories.forEach(({ name, story }) => {
+        // Instead of not running the test, you can create logic to skip it, flagging it accordingly in the test results.
+        const testFn = story.parameters.storyshots?.skip ? it.skip : it
+        const snapshotPath = path.join(
+          path.dirname(filePath),
+          '__snapshots__',
+          `${path.basename(filePath, '.tsx')}.storyshot`
+        )
+
+        testFn(name, async () => {
+          const mounted = renderer.create(story()).toJSON()
+          // Ensures a consistent snapshot by waiting for the component to render by adding a delay of 1 ms before taking the snapshot.
+          await new Promise((resolve) => setTimeout(resolve, 1))
+          expect(mounted).toMatchSpecificSnapshot(snapshotPath)
+        })
+      })
+    })
+  })
+})

jest.config.mjs

@@ -1,6 +1,6 @@
 /** @type { import('@jest/types').Config.InitialOptions } */
 const rootConfig = {
-  projects: ['packages/*'],
+  projects: ['packages/*', '.storybook'],
   passWithNoTests: true,
 }
 

package.json

@@ -83,6 +83,7 @@
     "glob": "^7.2.0",
     "husky": "^4.3.8",
     "jest": "^27.4.7",
+    "jest-specific-snapshot": "^8.0.0",
     "jsdom": "^19.0.0",
     "lerna": "^6.6.2",
     "npm-run-all": "^4.1.5",

packages/icons/src/PixivIcon.story.tsx

@@ -38,6 +38,12 @@ export default {
       },
     },
   },
+
+  parameters: {
+    storyshots: {
+      disable: true,
+    },
+  },
 }
 
 const groupedIcons = KNOWN_ICON_FILES.reduce<Record<string, KnownIconFile[]>>(

tsconfig.json

@@ -25,7 +25,8 @@
     "**/.*.cjs",
     "**/.*.js",
     "storyshots.*",
-    "__mocks__/*.ts"
+    "__mocks__/*.ts",
+    ".storybook"
   ],
   "exclude": ["docs"]
 }

yarn.lock

@@ -12225,6 +12225,7 @@ __metadata:
     glob: ^7.2.0
     husky: ^4.3.8
     jest: ^27.4.7
+    jest-specific-snapshot: ^8.0.0
     jsdom: ^19.0.0
     lerna: ^6.6.2
     npm-run-all: ^4.1.5