Merge pull request #475 from pixiv/mimo/add-test-runner-setting-for-i…

…mage-snapshots

Configured test-runner for image snapshot testing

.github/workflows/test.yml

@@ -36,33 +36,6 @@ jobs:
         env:
           CI: 'true'
 
-  test-storybook:
-    runs-on: ubuntu-latest
-    env:
-      CI: 'true'
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.node-version'
-          cache: yarn
-
-      - run: yarn install --immutable --inline-builds
-
-      - name: Install Playwgith
-        run: npx playwright install --with-deps
-
-      - name: Build Storybook
-        run: |
-          yarn build
-          yarn storybook:build --quiet
-
-      - name: Serve Storybook and run tests
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook"
-
   lint:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -31,3 +31,7 @@ lerna-debug.log*
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# tests
+/__diff_output__
+/__image_snapshots__

.storybook/test-runner.ts

@@ -1,7 +1,24 @@
-import type { TestRunnerConfig } from '@storybook/test-runner'
+import { waitForPageReady, type TestRunnerConfig } from '@storybook/test-runner'
+import { toMatchImageSnapshot } from 'jest-image-snapshot'
 
 const config: TestRunnerConfig = {
-  //
+  setup() {
+    expect.extend({ toMatchImageSnapshot })
+  },
+  async postVisit(page, context) {
+    await waitForPageReady(page)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot({
+      customSnapshotIdentifier: context.id,
+      customDiffDir: `${process.cwd()}/__diff_output__`,
+      customSnapshotsDir: `${process.cwd()}/__image_snapshots__`,
+      failureThresholdType: 'percent',
+      failureThreshold: 0.001,
+    })
+  },
+  tags: {
+    skip: ['skip-test'],
+  },
 }
 
 export default config

package.json

@@ -65,6 +65,7 @@
     "@stylelint/postcss-css-in-js": "^0.37.2",
     "@types/eslint": "^8.4.1",
     "@types/jest": "^27.4.0",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/jest-specific-snapshot": "^0.5.9",
     "@types/node": "^17.0.13",
     "@types/prettier": "^2.4.3",
@@ -85,6 +86,7 @@
     "glob": "^7.2.0",
     "husky": "^4.3.8",
     "jest": "^27.4.7",
+    "jest-image-snapshot": "^6.4.0",
     "jest-specific-snapshot": "^8.0.0",
     "jsdom": "^19.0.0",
     "lerna": "^6.6.2",
@@ -114,6 +116,7 @@
   },
   "packageManager": "yarn@3.1.0",
   "resolutions": {
-    "react-test-renderer": "17.0.2"
+    "react-test-renderer": "17.0.2",
+    "node-gyp": "^9.0.0"
   }
 }