-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import Home from './Home';
-import Fonts from '../fonts';

+const Fonts = React.lazy(() => import(/* webpackPrefetch: true */ '../fonts'));

 const App = () => (
   <div>
     <Route exact path="/" render={() => <Redirect to="/home" />} />
     <Route exact path="/home" component={Home} />
-    <Fonts />
+    <Suspense fallback={<div />}>
+      <Fonts />
+    </Suspense>
   </div>
 );

 export default App;

$ yarn add -D @babel/plugin-syntax-dynamic-import

 {
   "presets": [
     [
       "@babel/preset-env",
       {
         "useBuiltIns": "usage"
       }
     ],
     "@babel/preset-react"
   ],
-  "plugins": ["styled-components"]
+  "plugins": ["styled-components", "@babel/plugin-syntax-dynamic-import"]
 }

$ yarn add -D flow-bin @babel/preset-flow

 {
   "presets": [
     [
       "@babel/preset-env",
       {
         "useBuiltIns": "usage"
       }
     ],
+    "@babel/preset-flow",
     "@babel/preset-react"
   ],
   "plugins": ["styled-components", "@babel/plugin-syntax-dynamic-import"]
 }

$ yarn flow version
yarn run v1.7.0
$ C:\Users\kaitoy\Desktop\bin\pleiades\workspace\react-redux-scaffold\node_modules\.bin\flow version
Flow, a static type checker for JavaScript, version 0.77.0
Done in 0.38s.

$ yarn add -D babel-eslint eslint-plugin-flowtype

 module.exports = {
   env: {
     browser: true,
   },
+  parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier'],
+  extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier'],
+  plugins: ['flowtype'],
 };

// @flow

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import PropTypes from 'prop-types';

// Propsという型の定義
// text(string型)とopen(boolean型)というプロパティを持つオブジェクト
type Props = {
  text: string,
  open: boolean,
};

// Props型を受け取る関数
const MyDialog = ({ text, open }: Props) => (
  <Dialog open={open}>
    <DialogTitle>{text}</DialogTitle>
  </Dialog>
);

MyDialog.propTypes = {
  text: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired,
};

export default MyDialog;

$ yarn add -D flow-typed
$ yarn flow-typed --ignoreDeps dev install

 // @flow

 import React from 'react';
+import type { Node } from 'react';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import PropTypes from 'prop-types';

 // Propsという型の定義
 // text(string型)とopen(boolean型)というプロパティを持つオブジェクト
 type Props = {
   text: string,
   open: boolean,
 };

 // Props型を受け取る関数
-const MyDialog = ({ text, open }: Props) => (
+const MyDialog = ({ text, open }: Props): Node => (
   <Dialog open={open}>
     <DialogTitle>{text}</DialogTitle>
   </Dialog>
 );

 MyDialog.propTypes = {
   text: PropTypes.string.isRequired,
   open: PropTypes.bool.isRequired,
 };

 export default MyDialog;

$ yarn add -D jest babel-jest react-test-renderer babel-core@^7.0.0-bridge

 (前略)
   "scripts": {
     "format": "prettier --write **/*.jsx **/*.js **/*.css",
     "build": "webpack --config webpack.prod.js",
+    "test": "jest",
     "start": "webpack-dev-server --hot --config webpack.dev.js"
   },
 (後略)

$ yarn test --init

// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html

module.exports = {
  // All imported modules in your tests should be mocked automatically
  // automock: false,

  // Stop running tests after the first failure
  // bail: false,

  // Respect "browser" field in package.json when resolving modules
  // browser: false,

  // The directory where Jest should store its cached dependency information
  // cacheDirectory: "C:\\Users\\kaitoy\\AppData\\Local\\Temp\\jest",

  // Automatically clear mock calls and instances between every test
  // clearMocks: false,

  // Indicates whether the coverage information should be collected while executing the test
  // collectCoverage: false,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  // collectCoverageFrom: null,

  // The directory where Jest should output its coverage files
  coverageDirectory: 'coverage',

  // An array of regexp pattern strings used to skip coverage collection
  // coveragePathIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // A list of reporter names that Jest uses when writing coverage reports
  // coverageReporters: [
  //   "json",
  //   "text",
  //   "lcov",
  //   "clover"
  // ],

  // An object that configures minimum threshold enforcement for coverage results
  // coverageThreshold: null,

  // Make calling deprecated APIs throw helpful error messages
  // errorOnDeprecated: false,

  // Force coverage collection from ignored files usin a array of glob patterns
  // forceCoverageMatch: [],

  // A path to a module which exports an async function that is triggered once before all test suites
  // globalSetup: null,

  // A path to a module which exports an async function that is triggered once after all test suites
  // globalTeardown: null,

  // A set of global variables that need to be available in all test environments
  // globals: {},

  // An array of directory names to be searched recursively up from the requiring module's location
  // moduleDirectories: [
  //   "node_modules"
  // ],

  // An array of file extensions your modules use
  // moduleFileExtensions: [
  //   "js",
  //   "json",
  //   "jsx",
  //   "node"
  // ],

  // A map from regular expressions to module names that allow to stub out resources with a single module
  // moduleNameMapper: {},

  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
  // modulePathIgnorePatterns: [],

  // Activates notifications for test results
  // notify: false,

  // An enum that specifies notification mode. Requires { notify: true }
  // notifyMode: "always",

  // A preset that is used as a base for Jest's configuration
  // preset: null,

  // Run tests from one or more projects
  // projects: null,

  // Use this configuration option to add custom reporters to Jest
  // reporters: undefined,

  // Automatically reset mock state between every test
  // resetMocks: false,

  // Reset the module registry before running each individual test
  // resetModules: false,

  // A path to a custom resolver
  // resolver: null,

  // Automatically restore mock state between every test
  // restoreMocks: false,

  // The root directory that Jest should scan for tests and modules within
  // rootDir: null,

  // A list of paths to directories that Jest should use to search for files in
  // roots: [
  //   "<rootDir>"
  // ],

  // Allows you to use a custom runner instead of Jest's default test runner
  // runner: "jest-runner",

  // The paths to modules that run some code to configure or set up the testing environment before each test
  // setupFiles: [],

  // The path to a module that runs some code to configure or set up the testing framework before each test
  // setupTestFrameworkScriptFile: null,

  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
  // snapshotSerializers: [],

  // The test environment that will be used for testing
  // testEnvironment: "jest-environment-jsdom",

  // Options that will be passed to the testEnvironment
  // testEnvironmentOptions: {},

  // Adds a location field to test results
  // testLocationInResults: false,

  // The glob patterns Jest uses to detect test files
  // testMatch: [
  //   "**/__tests__/**/*.js?(x)",
  //   "**/?(*.)+(spec|test).js?(x)"
  // ],

  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
  // testPathIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // The regexp pattern Jest uses to detect test files
  // testRegex: "",

  // This option allows the use of a custom results processor
  // testResultsProcessor: null,

  // This option allows use of a custom test runner
  // testRunner: "jasmine2",

  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
  testURL: 'http://localhost/',

  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
  // timers: "real",

  // A map from regular expressions to paths to transformers
  // transform: null,

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  // transformIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
  // unmockedModulePathPatterns: undefined,

  // Indicates whether each individual test should be reported during the run
  // verbose: null,

  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
  // watchPathIgnorePatterns: [],

  // Whether to use watchman for file crawling
  // watchman: true,
};

$ yarn add -D eslint-plugin-jest

 module.exports = {
   env: {
     browser: true,
+    'jest/globals': true,
   },
   parser: 'babel-eslint',
   extends: ['airbnb', 'plugin:flowtype/recommended', 'prettier'],
-  plugins: ['flowtype'],
+  plugins: ['flowtype', 'jest'],
 };

import { hoge } from '../../reducers/reducers';
import { hogeButtonClicked } from '../../actions/actions';

const initialState = {
  clicked: false,
};

describe('reducers', () => {
  describe('hoge()', () => {
    test('returns a state with clicked:true when the action is HOGE_BUTTON_CLICKED', () => {
      const state = hogeButtonClicked(initialState, hogeButtonClicked());
      expect(state.clicked).toBe(true);
    });
  });
});

import React from 'react';
import renderer from 'react-test-renderer';
import HogeButton from '../../components/HogeButton';

describe('components', () => {
  describe('HogeButton', () => {
    test('renders correctly', () => {
      const tree = renderer.create(
        <HogeButton variant="contained" onClick={() => {}}>
          HOGE
        </HogeButton>
      ).toJSON();
      expect(tree).toMatchSnapshot();
    });
  });
});

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`components HogeButton renders correctly 1`] = `
<button
  className="MuiButtonBase-root-25 MuiButton-root-1 MuiButton-contained-10 MuiButton-raised-13"
  disabled={false}
  onBlur={[Function]}
  onClick={[Function]}
  onFocus={[Function]}
  onKeyDown={[Function]}
  onKeyUp={[Function]}
  onMouseDown={[Function]}
  onMouseLeave={[Function]}
  onMouseUp={[Function]}
  onTouchEnd={[Function]}
  onTouchMove={[Function]}
  onTouchStart={[Function]}
  tabIndex="0"
  type="button"
>
  <span
    className="MuiButton-label-2"
  >
    HOGE
  </span>
  <span
    className="MuiTouchRipple-root-28"
  />
</button>
`;

$ yarn add -D enzyme enzyme-adapter-react-16

 import React from 'react';
 import renderer from 'react-test-renderer';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import HogeButton from '../../components/HogeButton';

+beforeAll(() => {
+  Enzyme.configure({ adapter: new Adapter() });
+});

 describe('components', () => {
   describe('HogeButton', () => {
     test('renders correctly', () => {
       const tree = renderer.create(
         <HogeButton variant="contained" onClick={() => {}}>
           HOGE
         </HogeButton>
       ).toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    test("calls the passed handler when it's clicked", () => {
+      const handler = jest.fn();
+      const wrapper = mount(<HogeButton onClick={handler} />);
+      wrapper.find('button').simulate('click');
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
   });
 });