add test runner

.storybook/test-runner.ts

@@ -0,0 +1,12 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  async postVisit(page, context) {
+    // the #storybook-root element wraps the story. In Storybook 6.x, the selector is #root
+    const elementHandler = await page.$('#storybook-root');
+    const innerHTML = await elementHandler?.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+
+export default config;

package.json

@@ -36,6 +36,7 @@
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@storybook/storybook-deployer": "^2.8.10",
+    "@storybook/test-runner": "^0.17.0",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.0",
     "@types/styled-components": "^5.1.9",
@@ -119,7 +120,8 @@
     "test": "yarn lint:js && yarn lint:styles && yarn check:i18n-en-fr && yarn typescript && yarn unit && yarn a11y-test",
     "typescript": "lerna run tsc",
     "unit": "jest --testPathIgnorePatterns a11y .d.ts",
-    "update-internal-dependencies": "node scripts/update-internal-dependencies.js"
+    "update-internal-dependencies": "node scripts/update-internal-dependencies.js",
+    "test-storybook": "test-storybook"
   },
   "eslintConfig": {
     "env": {

storybook.test.ts

@@ -1,22 +1,22 @@
-import initStoryshots from "@storybook/addon-storyshots";
+// import initStoryshots from "@storybook/addon-storyshots";
 import "jest-styled-components";
 
-initStoryshots({
-  asyncJest: true,
-  test: async ({ story, done }) => {
-    /* The default storyshot method renders components as if they
-    were being rendered server-side. While this is good for many components,
-    map-based components especially benefit from rendering as if they were 
-    being rendered by a client. This results in more detailed and useful 
-    snapshots. This method renders each story as if it were being rendered 
-    by a browser, although with react syntax. A server-based render is done 
-    below. */
-    const jsx = await story.render();
-    expect(jsx).toMatchSnapshot();
-    done();
-  }
-});
+// initStoryshots({
+//   asyncJest: true,
+//   test: async ({ story, done }) => {
+//     /* The default storyshot method renders components as if they
+//     were being rendered server-side. While this is good for many components,
+//     map-based components especially benefit from rendering as if they were
+//     being rendered by a client. This results in more detailed and useful
+//     snapshots. This method renders each story as if it were being rendered
+//     by a browser, although with react syntax. A server-based render is done
+//     below. */
+//     const jsx = await story.render();
+//     expect(jsx).toMatchSnapshot();
+//     done();
+//   }
+// });
 
 // Also test using the default render method as it catches some changes
 // the new method does not
-initStoryshots();
+// initStoryshots();