Add Storybook Snapshot testing (fixes #117) (#194)

Co-authored-by: William Lachance <[email protected]>

README.md

@@ -49,6 +49,24 @@ run:
 npm run storybook
 ```
 
+### Storybook Snapshot Testing
+
+To give us more confidence that changes don't unintentionally break the UI, we run [storybook snapshot tests](https://storybook.js.org/docs/react/workflows/snapshot-testing).
+
+You can run them manually as follows:
+
+```bash
+npm run test:jest
+```
+
+If you intentionally made a change to a component that results in a change 
+to the output of the storybook snapshots, you can re-generate them using 
+the following command:
+
+```bash
+npm run test:jest -- -u
+```
+
 ## Contributing
 
 For more information on contributing, see [CONTRIBUTING.md](./CONTRIBUTING.md)

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+  ],
+};

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  transform: {
+    "^.+\\.svelte$": "svelte-jester",
+    "^.+\\.js$": "babel-jest",
+  },
+  moduleFileExtensions: ["js", "svelte", "json"],
+  testPathIgnorePatterns: ["/node_modules/", "/public/", "/storybook-static/"],
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
+  },
+};

package.json

@@ -11,18 +11,21 @@
     "start": "sirv public",
     "storybook": "start-storybook --static-dir ./public -p 6006",
     "test": "npm-run-all format:check lint test:jest",
-    "test:jest": "jest tests --no-cache",
+    "test:jest": "jest tests src --no-cache",
     "build-glean-metadata": "node scripts/build-glean-metadata.js"
   },
   "devDependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "^7.12.3",
     "@babel/plugin-transform-runtime": "7.12.1",
-    "@babel/preset-env": "7.12.1",
+    "@babel/preset-env": "^7.12.1",
     "@rollup/plugin-commonjs": "15.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",
     "@storybook/addon-knobs": "6.0.26",
+    "@storybook/addon-storyshots": "^6.0.28",
     "@storybook/addon-storysource": "6.0.26",
     "@storybook/svelte": "6.0.26",
+    "@testing-library/svelte": "^3.0.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "8.1.0",
     "eslint": "7.11.0",
     "eslint-config-airbnb-base": "14.2.0",
@@ -31,7 +34,7 @@
     "eslint-plugin-jest": "24.1.0",
     "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-svelte3": "2.7.3",
-    "jest": "26.5.3",
+    "jest": "^26.5.3",
     "lerna": "3.22.1",
     "npm-run-all": "4.1.5",
     "page": "1.11.6",
@@ -43,10 +46,11 @@
     "rollup-plugin-svelte": "6.0.1",
     "rollup-plugin-terser": "7.0.2",
     "svelte": "3.29.0",
+    "svelte-jester": "^1.1.5",
     "svelte-loader": "2.13.6"
   },
   "dependencies": {
-    "just-throttle": "^1.1.0",
+    "lodash": "^4.17.20",
     "lunr": "^2.3.9",
     "marked": "^1.2.2",
     "node-fetch": "^2.6.1",