Enhance jest and storybook

jest.config.json

@@ -1,9 +1,13 @@
 {
+  "coveragePathIgnorePatterns": ["/node_modules/", "story", "stories"],
   "moduleNameMapper": {
     "^~/(.*)": "<rootDir>/$1"
   },
   "preset": "@jupl/ts",
   "setupFiles": ["dotenv/config"],
   "setupFilesAfterEnv": ["<rootDir>/test/setup.ts"],
-  "testPathIgnorePatterns": ["/node_modules/", "/\\.cache/"]
+  "testPathIgnorePatterns": ["/node_modules/", "/\\.cache/"],
+  "transformIgnorePatterns": [
+    "node_modules/(?!(@storybook/addon-storyshots)/)"
+  ]
 }

package.json

@@ -14,7 +14,7 @@
     "lint:fix": "yarn run lint:fix:file .",
     "lint:fix:file": "yarn run lint:file --fix",
     "server": "parcel serve src/+dist/*",
-    "server:story": "start-storybook -c story",
+    "server:story": "start-storybook -c story -p 9001",
     "start": "yarn run build:prod",
     "test": "jest",
     "test:update": "yarn run test --update-snapshot",
@@ -30,6 +30,8 @@
   "devDependencies": {
     "@babel/core": "^7.10.5",
     "@jupl/ts": "^0.8.0",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-storyshots": "^5.3.19",
     "@storybook/react": "^5.2.8",
     "@types/jest": "^26.0.5",
     "@types/react": "^16.9.43",
@@ -39,12 +41,13 @@
     "babel-preset-react-app": "^9.1.2",
     "cross-env": "^7.0.2",
     "eslint": "^7.5.0",
-    "jest": "^26.1.0",
+    "jest": "^25.5.4",
     "jest-styled-components": "^7.0.2",
     "parcel": "^2.0.0-nightly.341",
     "postcss-modules": "^3.2.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.5",
+    "react-test-renderer": "^16.13.1",
     "trash-cli": "^3.0.0",
     "ts-node": "^8.10.2",
     "tsconfig-paths": "^3.9.0",

src/__snapshots__/storyshots.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Main|App default 1`] = `"Hello, world."`;

src/main/components/app/story.tsx

@@ -2,4 +2,4 @@ import {storiesOf} from '@storybook/react'
 import React from 'react'
 import {MainApp} from '.'
 
-storiesOf('MainApp', module).add('default', () => <MainApp />)
+storiesOf('Main|App', module).add('default', () => <MainApp />)

src/storyshots.test.ts

@@ -0,0 +1,3 @@
+import initStoryshots from '@storybook/addon-storyshots'
+
+initStoryshots({configPath: 'story'})

story/main.ts

@@ -4,6 +4,8 @@ const TSConfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
 
 type Configuration = import('webpack').Configuration
 
+exports.addons = ['@storybook/addon-knobs/register']
+
 exports.stories = [
   '../src/**/story.tsx',
   '../src/**/stories.tsx',

story/preview.tsx

@@ -1,8 +1,10 @@
+import {withKnobs} from '@storybook/addon-knobs'
 import {addDecorator} from '@storybook/react'
 import React from 'react'
 import {RecoilRoot} from 'recoil'
 import {Normalize} from 'styled-normalize'
 
+addDecorator(withKnobs)
 addDecorator(storyFn => (
   <>
     <Normalize />