feat(tests): configure StoryShots (#498)

* feat(tests): use storyshots for snapshot tests

* fix(tests): remove story wrapper from storyshots

* fix(tests): disable test decorator for storyshots

* test(components): update snapshots

.babelrc

@@ -79,7 +79,8 @@
       "plugins": [
         "@babel/plugin-proposal-class-properties",
         "lodash",
-        "react-docgen"
+        "react-docgen",
+        "macros"
       ],
       "presets": [
         [

.storybook/.babelrc

@@ -2,7 +2,8 @@
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "lodash",
-    "inline-react-svg"
+    "inline-react-svg",
+    "macros"
   ],
   "presets": [
     ["@babel/preset-env", { "loose": true }],

.storybook/config.js

@@ -4,11 +4,11 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { ThemeProvider } from 'emotion-theming';
 import styled from '@emotion/styled';
+import requireContext from 'require-context.macro';
 
 import { theme as themes, BaseStyles } from '../src';
 import { theme, components } from './util/theme';
 import { sortStories } from './util/story-helpers';
-import withTests from './util/withTests';
 
 const { circuit } = themes;
 
@@ -67,15 +67,21 @@ const withThemeProvider = storyFn => (
 );
 
 addDecorator(withA11y);
-addDecorator(withTests);
 addDecorator(withKnobs);
-addDecorator(withStoryStyles);
+
+// These decorators need to be disabled for StoryShots to work.
+if (!__TEST__) {
+  const withTests = require('./util/withTests');
+  addDecorator(withTests);
+  addDecorator(withStoryStyles);
+}
+
 addDecorator(withThemeProvider);
 
 configure(
   [
-    require.context('../src', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/),
-    require.context('../docs', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/)
+    requireContext('../src', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/),
+    requireContext('../docs', true, /\.(stories|story)\.(js|ts|tsx|mdx)$/)
   ],
   module
 );

jest.config.js

@@ -18,7 +18,7 @@ module.exports = {
   coverageDirectory: './__coverage__',
   rootDir: '.',
   roots: ['src', 'scripts'],
-  moduleFileExtensions: ['js', 'jsx'],
+  moduleFileExtensions: ['js', 'jsx', 'json'],
   collectCoverageFrom: [
     'src/@(components|util|styles)/**/*.{js,jsx}',
     '!src/@(components|util|styles)/**/index.{js,jsx}',
@@ -29,7 +29,8 @@ module.exports = {
   moduleDirectories: ['node_modules', 'src'],
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '^.+\\.svg$': '<rootDir>/jest.fileTransformer.js'
+    '^.+\\.svg$': '<rootDir>/jest.fileTransformer.js',
+    '^.+\\.mdx$': '<rootDir>/jest.mdxTransformer.js'
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
 };

jest.mdxTransformer.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  process() {
+    return 'null';
+  }
+};

package.json

@@ -73,6 +73,7 @@
     "@storybook/addon-jest": "^5.2.0",
     "@storybook/addon-knobs": "^5.2.0",
     "@storybook/addon-links": "^5.2.0",
+    "@storybook/addon-storyshots": "^5.2.5",
     "@storybook/addon-storysource": "^5.2.0",
     "@storybook/addon-viewport": "^5.2.4",
     "@storybook/addons": "^5.2.0",
@@ -110,6 +111,7 @@
     "prettier": "1.16.4",
     "prettier-eslint": "^8.8.2",
     "react-test-renderer": "^16.8.6",
+    "require-context.macro": "^1.2.2",
     "style-loader": "^0.23.1",
     "webpack-merge": "^4.2.1",
     "yargs": "^14.0.0"