setup chromatic

package.json

@@ -102,7 +102,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
-    "@storybook/testing-react": "^0.0.17",
+    "@storybook/testing-react": "^0.0.22",
     "@types/mongoose": "^5.7.27",
     "@types/node": "^13.7.6",
     "@types/react": "^16.9.23",
@@ -113,7 +113,7 @@
     "graphql-voyager": "^1.0.0-rc.31",
     "react-is": "^16.13.1",
     "source-map-support": "^0.5.19",
-    "storybook-css-modules-preset": "^1.0.5",
+    "storybook-css-modules-preset": "^1.1.1",
     "ts-loader": "^7.0.5",
     "ts-node": "^8.10.2",
     "typescript": "^4.3.5",
@@ -124,16 +124,16 @@
     "@cypress/webpack-preprocessor": "^5.4.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@next/bundle-analyzer": "^9.4.4",
-    "@next/plugin-storybook": "^10.0.2",
-    "@storybook/addon-a11y": "^6.1.0",
-    "@storybook/addon-actions": "^6.1.0",
-    "@storybook/addon-backgrounds": "^6.1.0",
-    "@storybook/addon-controls": "^6.1.0",
-    "@storybook/addon-docs": "^6.1.0",
-    "@storybook/addon-essentials": "^6.1.0",
-    "@storybook/addon-links": "^6.1.0",
-    "@storybook/addons": "^6.1.0",
-    "@storybook/react": "^6.1.0",
+    "@next/plugin-storybook": "^11.1.0",
+    "@storybook/addon-a11y": "^6.3.7",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-backgrounds": "^6.3.7",
+    "@storybook/addon-controls": "^6.3.7",
+    "@storybook/addon-docs": "^6.3.7",
+    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-links": "^6.3.7",
+    "@storybook/addons": "^6.3.7",
+    "@storybook/react": "^6.3.7",
     "@testing-library/cypress": "^6.0.0",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.0",

src/content/docs/features/testing-+-storybook.md

@@ -109,12 +109,15 @@ There is nothing worse than a slow Storybook build, you can debug your Webpack b
 
 ### Mock packages
 
-See `.storybook/mocks/packages` and `.storybook/main.js`, we use Webpack alias to load them. Thus, you can use components that rely on `next/router` and `next/config` for instance.
+See `.storybook/mocks/packages` and `.storybook/main.js`, we use Webpack alias to load them. Thus, you can use components that rely on `next/config` for instance.
+
+We use [Storybook Addon Next Router](https://storybook.js.org/addons/storybook-addon-next-router) for mocking the router.
 
 ### Chromatic configuration
 
 We don't usually recommend third party services, but [Chromatic](https://www.chromatic.com/) is really an excellent addition to any developer
 workflow.
 
 Set the [`CHROMATIC_PROJECT_TOKEN` environment variable](https://www.chromatic.com/docs/cli#required-options) in `.env.development.local`
-and then run `yarn run chromatic`.
+and then run `yarn run chromatic`.
+