Generate Jest snapshots from Storybook stories

.github/workflows/test.yml

@@ -0,0 +1,34 @@
+name: Unit tests
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - development
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.8.0
+        with:
+          access_token: ${{ github.token }}
+      - uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - run: |
+          mkdir .yarncache
+          yarn install --cache-folder ./.yarncache --frozen-lockfile
+          rm -rf .yarncache
+          yarn cache clean
+
+      - run: yarn test

README.md

@@ -103,6 +103,33 @@ export default App;
 
 You can find documentation and examples of all our components in this [storybook](https://components.gnosis-safe.io/).
 
+## Local development
+
+To develop on your local machine, install the dependencies (including the peer dependencies):
+```
+yarn
+```
+
+Launch the Storybook:
+```
+yarn storybook
+```
+
+## Testing
+
+Snapshot tests are generated automatically from the Storybook stories using the [StoryShots addon](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core).
+
+To run the tests locally:
+```
+yarn test
+```
+
+Alternatively, run `yarn test --watch` to re-run the tests for each modification you do.
+Before you commit your changes, you need to update the snapshots and commit them as well. To do so, run `yarn test -u`.
+When the command finishes, the resulting snapshots will be the new baseline.
+
+If you want to add a new Jest test, make sure to put a file with the `.test.tsx` extension into the same directory as the corresponding component.
+
 ## Examples
 
 At Gnosis we have developed some example Safe Apps. Here is the [repository](https://github.com/gnosis/safe-react-apps).

babel.config.js

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

package.json

@@ -17,6 +17,8 @@
     "build-storybook": "build-storybook --docs",
     "storybook": "start-storybook -p 9009 --docs",
     "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'",
+    "prettier": "prettier -w",
+    "test": "jest tests/storybook.test.js",
     "prepare": "yarn build"
   },
   "author": "Gnosis (https://gnosis.pm)",
@@ -26,10 +28,15 @@
     "react-media": "^1.10.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.13.0",
     "@material-ui/core": "^4.11.2",
     "@storybook/addon-actions": "^6.1.0",
     "@storybook/addon-docs": "^6.1.0",
     "@storybook/addon-links": "^6.1.0",
+    "@storybook/addon-storyshots": "^6.2.7",
     "@storybook/addons": "^6.1.0",
     "@storybook/react": "^6.1.0",
     "@testing-library/jest-dom": "^5.11.5",
@@ -46,6 +53,7 @@
     "@typescript-eslint/parser": "^4.6.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.1.0",
     "copy-webpack-plugin": "^6.3.0",
     "eslint": "^7.12.0",
@@ -55,6 +63,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "file-loader": "^6.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
     "prettier": "^2.1.0",
     "react": "^16.13.0",
     "react-docgen-typescript-loader": "^3.7.2",
@@ -91,6 +101,15 @@
       "last 1 safari version"
     ]
   },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/tests/jest-runtime.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gnosis/safe-react-components.git"