CRA 2.1 + Storybook + typescript + jest

addons.js

// ./.storybook/addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register';
import 'storybook-addon-intl/register';

config.js

// ./.storybook/config.js

import { addDecorator, configure } from '@storybook/react';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';
import { withKnobs } from '@storybook/addon-knobs';

import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import frLocaleData from 'react-intl/locale-data/fr';
import { getFlattenedMessages } from "../src/utils/locale";
import 'typeface-roboto';
import 'typeface-montserrat';
import 'typeface-noto-sans';
import '../src/index.css';

addLocaleData(enLocaleData);
addLocaleData(frLocaleData);

// Set intl configuration
setIntlConfig({
    locales: ['en', 'fr'],
    defaultLocale: 'en',
    getMessages: (locale) => getFlattenedMessages(locale)
});

// Register decorator
addDecorator(withIntl);
addDecorator(withKnobs);

const req = require.context('../src/components', true, /\.stories\.js$/)

function loadStories() {
    req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

gistfile1.txt

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react",
    "isolatedModules": false
  }
}

package.json

{
  "name": "whatever",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-redux": "^5.0.7",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom --modulePaths=src",
    "eject": "react-scripts eject",
    "storybook": "NODE_PATH=src start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public",
    "dev": "yarn install && yarn start"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/preset-react": "^7.0.0",
    "@storybook/addon-actions": "^4.0.4",
    "@storybook/addon-info": "^4.0.4",
    "@storybook/addon-knobs": "^4.0.6",
    "@storybook/addon-links": "^4.0.4",
    "@storybook/addons": "^4.0.4",
    "@storybook/react": "^4.0.4",
    "@types/jest": "^23.3.9",
    "@types/lodash": "^4.14.116",
    "@types/node": "^10.11.3",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.8",
    "@types/react-redux": "^6.0.9",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "redux-mock-store": "^1.5.3",
    "tslint-config-prettier": "^1.15.0",
    "tslint-react": "^3.6.0",
    "typescript": "^2.9.2"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

test.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { AnyComponent } from './AnyComponent';
import { boolean, select } from '@storybook/addon-knobs';

storiesOf('AnyComponent', module)
    .add('AnyComponent Default', () => {
            const selected = boolean('Selected', false);
            return (
                <AnyComponent              
                    from={1539820800000} // Thursday 18 October 2018 00:00:00
                    to={1539824400000} // Thursday 18 October 2018 01:00:00
                    selected={selected}
                />
            );
        }
    )
;

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "es5",
      "es6",
      "es7",
      "es2017",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "preserve",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "resolveJsonModule": true,
    "noEmit": true,
    "esModuleInterop": true,
    "strict": false,
    "isolatedModules": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts"
  ]
}

webpack.config.js

// ./.storybook/webpack.config.js

const path = require("path");

// https://storybook.js.org/configurations/custom-webpack-config/
module.exports = (baseConfig, env, defaultConfig) => {
    // Add typescript loader
    defaultConfig.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: path.resolve(__dirname, "../src"),
        use: [
            {
                loader: 'awesome-typescript-loader',
                options: {
                    // path to custom tsconfig file, overrided by CRA 2.1 otherwise
                    configFileName: path.resolve(__dirname, '../tsconfig.storybook.json')
                }
            }
        ]
    });
    defaultConfig.resolve.extensions.push(".ts", ".tsx");

    // @fix:  Error: Can't resolve 'net' in '/Users/yann/www/eco6-airline-airport/frontend/node_modules/stompjs/lib'
    defaultConfig = Object.assign({ node: { net: 'empty' } }, defaultConfig);
    return defaultConfig;
};