Added babel-plugin-styled-components

Jest でも styled-components の displayName を参照できるように修正
https://gist.github.com/mrlundis/ca809eea890fa9fd5d98facd51cde731

config-overrides.js

@@ -27,21 +27,41 @@ const rewireStylelint = (options = {}) => (config, env) => {
   return config;
 };
 
-module.exports = compose(
-  rewireStyledComponentsTypescriptPlugin,
-  rewireStyledComponents,
-  // rewireTslint({
-  //   emitErrors: false,
-  //   fix: true,
-  // }),
-  rewireStylelint({
-    files: [
-      'public/**/*.css',
-      'public/index.html',
+module.exports.webpack = () => {
+  compose(
+    rewireStyledComponentsTypescriptPlugin,
+    rewireStyledComponents,
+    // rewireTslint({
+    //   emitErrors: false,
+    //   fix: true,
+    // }),
+    rewireStylelint({
+      files: [
+        'public/**/*.css',
+        'public/index.html',
+      ],
+      fix: true,
+    }),
+    rewireStylelint({
+      files: ['src/**/*.ts{,x}'],
+    }),
+  );
+ }
+
+module.exports.jest = (config) => {
+  config.globals['ts-jest'].babelConfig = {
+    presets: [
+      'react-app',
+    ],
+    plugins: [
+      [
+        'styled-components',
+        {
+          displayName: true,
+          fileName: false,
+        },
+      ],
     ],
-    fix: true,
-  }),
-  rewireStylelint({
-    files: ['src/**/*.ts{,x}'],
-  }),
-);
+  };
+  return config;
+}

src/App/index.test.tsx

@@ -5,3 +5,14 @@ import App from '../App';
 it('renders without crashing', () => {
   shallow(<App />);
 });
+
+it('renders welcome message', () => {
+  const wrapper = shallow(<App />);
+  const welcome = 'Welcome to React';
+  expect(
+    wrapper
+      .find('AppTitle')
+      .children()
+      .text()
+  ).toBe(welcome);
+});

src/__snapshots__/storyshots.test.ts.snap

@@ -44,7 +44,7 @@ exports[`Storyshots App Group|App Welcome to Storybook 1`] = `
     <img
       alt="logo"
       className="c2"
-      src={undefined}
+      src="logo.svg"
     />
     <h1
       className="c3"

src/setupTests.ts

@@ -1,5 +1,5 @@
-import * as enzyme from 'enzyme';
-import * as Adapter from 'enzyme-adapter-react-16';
+import enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 
 // https://github.com/storybooks/storybook/issues/1011
 jest.mock('@storybook/addon-info', () => ({

tsconfig.test.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs"
+    "module": "es6",
+    "target": "es6",
   }
 }