Update react, withProps coverage, context api migration (#474)

* Upgrade react, react-dom, migrate context. * Add test coverage for existing componentWillReceiveProps behavior * Rename functions to avoid warnings. * Bring back commented out code * Add commas to remain consistent
facebookarchive · Oct 16, 2019 · 466130c · 466130c
1 parent 1c423d7
commit 466130c
Show file tree

Hide file tree

Showing 4 changed files with 5,324 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -51,9 +51,9 @@
     "immutable": "^3.7.4",
     "jest": "^15.1.1",
     "object-assign": "^4.0.1",
-    "react": "^15.0.2",
-    "react-addons-test-utils": "^15.0.1",
-    "react-dom": "^15.0.1",
+    "react": "^16.9.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.9.0",
     "run-sequence": "^1.1.0",
     "vinyl-source-stream": "^1.0.0",
     "webpack": "^1.11.0",
@@ -76,7 +76,9 @@
     ],
     "rootDir": "./",
     "scriptPreprocessor": "scripts/jest/preprocessor.js",
-    "setupFiles": ["scripts/jest/environment.js"],
+    "setupFiles": [
+      "scripts/jest/environment.js"
+    ],
     "testPathDirs": [
       "<rootDir>/src"
     ]

diff --git a/src/container/FluxContainer.js b/src/container/FluxContainer.js
@@ -148,7 +148,7 @@ function create<DefaultProps, Props, State>(
       };
     }
 
-    componentWillReceiveProps(nextProps: any, nextContext: any): void {
+    UNSAFE_componentWillReceiveProps(nextProps: any, nextContext: any): void {
       if (super.componentWillReceiveProps) {
         super.componentWillReceiveProps(nextProps, nextContext);
       }

diff --git a/src/container/__tests__/FluxContainer-test.js b/src/container/__tests__/FluxContainer-test.js
@@ -18,36 +18,18 @@ var FluxContainer = require('FluxContainer');
 var FluxReduceStore = require('FluxReduceStore');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var ReactTestUtils = require('react-addons-test-utils');
+var ReactTestUtils = require('react-dom/test-utils');
 
 var {Component} = React;
 
 /**
  * Helper to create a container. The container must render a single div with
  * text content, this will return a function to access that content.
  */
-function createContainer(containerClass, options, props, context) {
+function createContainer(containerClass, options, props) {
   var container = FluxContainer.create(containerClass, options);
   var element = React.createElement(container, props);
-  var tag;
-  if (options && options.withContext) {
-    // Create a new component that provides the child context.
-    var ComponentWithContext = React.createClass({
-      childContextTypes: {
-        value: React.PropTypes.any,
-      },
-      getChildContext: function() {
-        return context;
-      },
-      render: function() {
-        return <span>{this.props.children}</span>;
-      },
-    });
-    var wrapper = React.createElement(ComponentWithContext, {}, element);
-    tag = ReactTestUtils.renderIntoDocument(wrapper);
-  } else {
-    tag = ReactTestUtils.renderIntoDocument(element);
-  }
+  var tag = ReactTestUtils.renderIntoDocument(element);
   var component = ReactTestUtils.findRenderedDOMComponentWithTag(tag, 'div');
   var simpleDOMNode = ReactDOM.findDOMNode(component);
   return () => simpleDOMNode.textContent;
@@ -181,6 +163,23 @@ describe('FluxContainer', () => {
     expect(getValue()).toBe('prop-bar');
   });
 
+  it('should react to props changes', () => {
+    class SimpleContainer extends BaseContainer {
+      static calculateState(prevState, props) {
+        return {
+          value: props.value + '-' + FooStore.getState(),
+        };
+      }
+    }
+    const SimpleContainerComponent = FluxContainer.create(SimpleContainer, {withProps: true});
+
+    const node = document.createElement('div');
+    const component = ReactDOM.render(<SimpleContainerComponent value="initial" />, node);
+    ReactDOM.render(<SimpleContainerComponent value="changed" />, node);
+    const text = ReactDOM.findDOMNode(component).textContent;
+    expect(text).toBe('changed-foo');
+  });
+
   it('should preserve initial state set in constructor', () => {
     // Hack to expose internal state for testing.
     let dangerouslyGetState = () => ({});
@@ -227,7 +226,7 @@ describe('FluxContainer', () => {
         };
       }
 
-      componentWillMount() {
+      UNSAFE_componentWillMount() {
         dispatch({
           type: 'set',
           value: 'bar',
@@ -239,11 +238,13 @@ describe('FluxContainer', () => {
   });
 
   it('should get access to context in getStores', () => {
-    // Setup the container.
+    const MyContext = React.createContext(
+      {value: FooStore}
+    );
+
     class SimpleContainer extends BaseContainer {
-      static contextTypes = {
-        value: React.PropTypes.any,
-      };
+
+      static contextType = MyContext;
 
       static getStores(props, context) {
         return [context.value];
@@ -255,24 +256,25 @@ describe('FluxContainer', () => {
         };
       }
     }
+    SimpleContainer.contextType = MyContext;
 
     var getValue = createContainer(
       SimpleContainer,
       {withContext: true}, // options
       {}, // props
-      {value: FooStore}, // context
     );
 
-    // Test it.
     expect(getValue()).toBe('foo');
   });
 
   it('should get access to context in calculateState', () => {
-    // Setup the container.
+    const MyContext = React.createContext(
+      {value: "context"}
+    );
+
     class SimpleContainer extends BaseContainer {
-      static contextTypes = {
-        value: React.PropTypes.any,
-      };
+
+      static contextType = MyContext;
 
       static calculateState(prevState, props, context) {
         return {
@@ -285,7 +287,6 @@ describe('FluxContainer', () => {
       SimpleContainer,
       {withProps: true, withContext: true}, // options
       {}, // props
-      {value: 'context'}, // context
     );
 
     // Test it.