React 16 support (#86)

* Update tests to support React 16. * Update documentation on using enzyme inside storybooks. * Revert config.js. * Add @stotybook/ui and @storybook/react peer dependencies. * Bring back react 15 to peer dependencies.
mthuret · Dec 21, 2017 · ec4877f · ec4877f · travi · Jan 17, 2018
1 parent ff95bf6
commit ec4877f
Show file tree

Hide file tree

Showing 6 changed files with 2,116 additions and 969 deletions.
diff --git a/.storybook/__conf__/enzymeConfig.js b/.storybook/__conf__/enzymeConfig.js
@@ -0,0 +1,4 @@
+import {configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
diff --git a/.storybook/__conf__/jestMockConfig.js b/.storybook/__conf__/jestMockConfig.js
@@ -1 +1,6 @@
-jest.mock('../facade');
+jest.mock('../facade');
+
+global.requestAnimationFrame = function(callback) {
+  setTimeout(callback, 0)
+};
+
diff --git a/.storybook/__conf__/mochaMockConfig.js b/.storybook/__conf__/mochaMockConfig.js
@@ -24,3 +24,9 @@ global.document = jsdom('<!doctype html><html><body></body></html>', {
 });
 global.window = document.defaultView;
 global.navigator = global.window.navigator;
+
+
+global.requestAnimationFrame = function(callback) {
+  setTimeout(callback, 0)
+};
+
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ This addon for storybook will allow you to write tests based on your stories and
 ## Table of contents
 
 * [Getting Started](#getting-started)
+* [Using enzyme](#using-enzyme)
 * [Use your stories with a test runner](#use-your-stories-with-a-test-runner)
   * [Using Jest](#using-jest)
     * [Hooks and specifics jest features](#hooks-and-specifics-jest-features)
@@ -63,20 +64,35 @@ stories.add('Hello World', function () {
 });
 ```
 
-> Note : if you use enzyme, you will need to add the following lines to your webpack.config.js file. You also need to add the **json library** to your dev dependencies.
-
->```
->externals: {
->    'jsdom': 'window',
->    'cheerio': 'window',
->    'react/lib/ExecutionEnvironment': true,
->    'react/lib/ReactContext': 'window',
->    'react/addons': true,
->  }
->```
 
 You can use `beforeEach`, `before`, `after` and `afterEach` functions to mutualize or clean up some stuff.
 
+
+## Using enzyme
+
+To use enzyme inside storybooks, you will need to do the following: 
+
+1. Configure enzyme with an appropriate adapter inside your .storybook/config.js:
+   ```js
+   import {configure} from 'enzyme';
+   import Adapter from 'enzyme-adapter-react-16';
+
+   configure({ adapter: new Adapter() });
+   ```
+2. Add the following lines to your webpack.config.js:
+   ```
+   externals: {
+     'jsdom': 'window',
+     'cheerio': 'window',
+     'react/lib/ExecutionEnvironment': true,
+     'react/lib/ReactContext': 'window',
+     'react/addons': true,
+   }
+   ```
+3. Add the **json library** to your dev dependencies.
+
+
+
 ## Use your stories with a test runner
 
 Writing tests directly next to the component declaration used for the story is already a great thing, but it would be better if those tests can be reused with our test runner, and later be used with our CI.

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "storybook": "start-storybook -p 9001",
     "babel": "babel --ignore __tests__ src --out-dir dist",
     "jest": "jest",
-    "mocha": "mocha --compilers js:babel-register --require babel-polyfill ./.storybook/__conf__/mochaMockConfig.js \"./.storybook/**/*.mocha.stories.js\"",
+    "mocha": "mocha --compilers js:babel-register --require babel-polyfill ./.storybook/__conf__/mochaMockConfig.js ./.storybook/__conf__/enzymeConfig.js \"./.storybook/**/*.mocha.stories.js\"",
     "test": "npm-run-all babel jest mocha"
   },
   "repository": {
@@ -29,37 +29,40 @@
   },
   "homepage": "https://github.com/mthuret/storybook-addon-specifications#readme",
   "devDependencies": {
+    "@storybook/addons": "3.2.17",
+    "@storybook/react": "3.2.17",
+    "@storybook/ui": "3.2.17",
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
+    "babel-runtime": "^6.26.0",
     "chai": "^4.0.2",
-    "enzyme": "^2.4.1",
+    "enzyme": "3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
     "expect": "^1.20.2",
     "jest": "^21.0.0",
     "json": "^9.0.4",
     "mocha": "^3.0.2",
     "npm-run-all": "^4.0.2",
-    "react": "^15.3.0",
-    "react-addons-test-utils": "^0.14.7 || ^15.0.0",
-    "react-dom": "^15.3.0",
-    "react-test-renderer": "^15.3.1",
-    "rimraf": "^2.5.4",
-    "@storybook/ui": "3.2.4",
-    "@storybook/react": "3.2.3",
-    "@storybook/addons": "3.2.6"
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
+    "rimraf": "^2.5.4"
   },
   "dependencies": {
     "aphrodite": "^1.1.0"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.0.0",
-    "react": "^0.14.7 || ^15.0.0",
-    "react-dom": "^0.14.7 || ^15.0.0"
+    "react": "^0.14.7 || ^15.0.0 || ^16.0.0",
+    "react-dom": "^0.14.7 || ^15.0.0 || ^16.0.0"
   },
   "jest": {
     "setupFiles": [
-      "./.storybook/__conf__/jestMockConfig.js"
+      "./.storybook/__conf__/jestMockConfig.js",
+      "./.storybook/__conf__/enzymeConfig.js"
     ],
     "testRegex": "../.*.ci.jest.stories.js$",
     "automock": false,