Convert React.createClass to React.Component

enzymejs · Apr 10, 2017 · a9c7b66 · a9c7b66
1 parent 8cbb82b
commit a9c7b66
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 65 deletions.
diff --git a/docs/api/ReactWrapper/matchesElement.md b/docs/api/ReactWrapper/matchesElement.md
@@ -21,16 +21,20 @@ render tree.
 
 
 ```jsx
-const MyComponent = React.createClass({
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
   handleClick() {
     ...
-  },
+  }
   render() {
     return (
       <div onClick={this.handleClick} className="foo bar">Hello</div>
     );
   }
-});
+}
 
 const wrapper = mount(<MyComponent />);
 expect(wrapper.matchesElement(

diff --git a/docs/api/ReactWrapper/setContext.md b/docs/api/ReactWrapper/setContext.md
@@ -21,14 +21,14 @@ NOTE: can only be called on a wrapper instance that is also the root instance.
 #### Example
 
 ```jsx
-const SimpleComponent = React.createClass({
-  contextTypes: {
-    name: React.PropTypes.string,
-  },
+class SimpleComponent extends React.Component {
   render() {
     return <div>{this.context.name}</div>;
-  },
-});
+  }
+}
+SimpleComponent.contextTypes = {
+  name: React.PropTypes.string,
+};
 ```
 ```jsx
 const context = { name: 'foo' };

diff --git a/docs/api/ShallowWrapper/matchesElement.md b/docs/api/ShallowWrapper/matchesElement.md
@@ -21,16 +21,20 @@ render tree.
 
 
 ```jsx
-const MyComponent = React.createClass({
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
   handleClick() {
     ...
-  },
+  }
   render() {
     return (
       <div onClick={this.handleClick} className="foo bar">Hello</div>
     );
   }
-});
+}
 
 const wrapper = shallow(<MyComponent />);
 expect(wrapper.matchesElement(

diff --git a/docs/api/ShallowWrapper/prop.md b/docs/api/ShallowWrapper/prop.md
@@ -19,13 +19,13 @@ of the root node of the component.
 
 
 ```jsx
-const MyComponent = React.createClass({
+class MyComponent extends React.Component {
   render() {
     return (
         <div className="foo bar" includedProp={this.props.includedProp}>Hello</div>
     )
   }
-})
+}
 const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
 expect(wrapper.prop('includedProp')).to.equal("Success!");
 

diff --git a/docs/api/ShallowWrapper/props.md b/docs/api/ShallowWrapper/props.md
@@ -13,13 +13,13 @@ See [`.instance() => ReactComponent`](instance.md)
 
 
 ```jsx
-const MyComponent = React.createClass({
+class MyComponent extends React.Component {
   render() {
     return (
         <div className="foo bar" includedProp={this.props.includedProp}>Hello</div>
     )
   }
-})
+}
 const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
 expect(wrapper.props().includedProp).to.equal("Success!");
 

diff --git a/docs/api/ShallowWrapper/setContext.md b/docs/api/ShallowWrapper/setContext.md
@@ -21,14 +21,14 @@ NOTE: can only be called on a wrapper instance that is also the root instance.
 #### Example
 
 ```jsx
-const SimpleComponent = React.createClass({
-  contextTypes: {
-    name: React.PropTypes.string,
-  },
+class SimpleComponent extends React.Component {
   render() {
     return <div>{this.context.name}</div>;
-  },
-});
+  }
+}
+SimpleComponent.contextTypes = {
+  name: React.PropTypes.string,
+};
 ```
 ```jsx
 const context = { name: 'foo' };

diff --git a/docs/api/render.md b/docs/api/render.md
@@ -30,14 +30,14 @@ describe('<Foo />', () => {
   });
 
   it('can pass in context', () => {
-    const SimpleComponent = React.createClass({
-      contextTypes: {
-        name: React.PropTypes.string,
-      },
+    class SimpleComponent extends React.Component {
       render() {
         return <div>{this.context.name}</div>;
-      },
-    });
+      }
+    }
+    SimpleComponent.contextTypes = {
+      name: React.PropTypes.string,
+    };
 
     const context = { name: 'foo' };
     const wrapper = render(<SimpleComponent />, { context });

diff --git a/src/ReactWrapperComponent.jsx b/src/ReactWrapperComponent.jsx
@@ -12,63 +12,54 @@ import objectAssign from 'object.assign';
  * pass new props in.
  */
 export default function createWrapperComponent(node, options = {}) {
-  const spec = {
-
-    propTypes: {
-      Component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired,
-      props: PropTypes.object.isRequired,
-      context: PropTypes.object,
-    },
-
-    getDefaultProps() {
-      return {
-        context: null,
-      };
-    },
-
-    getInitialState() {
-      return {
+  class WrapperComponent extends React.Component {
+    constructor(...args) {
+      super(...args);
+      this.state = {
         mount: true,
         props: this.props.props,
         context: this.props.context,
       };
-    },
-
+    }
     setChildProps(newProps, callback = undefined) {
       const props = objectAssign({}, this.state.props, newProps);
       this.setState({ props }, callback);
-    },
-
-    setChildContext(context) {
-      return new Promise(resolve => this.setState({ context }, resolve));
-    },
-
+    }
     getInstance() {
       const component = this._reactInternalInstance._renderedComponent;
       const inst = component.getPublicInstance();
       if (inst === null) {
         return component._instance;
       }
       return inst;
-    },
-
+    }
     getWrappedComponent() {
       const component = this._reactInternalInstance._renderedComponent;
       const inst = component.getPublicInstance();
       if (inst === null) {
         return component._instance;
       }
       return inst;
-    },
-
+    }
+    setChildContext(context) {
+      return new Promise(resolve => this.setState({ context }, resolve));
+    }
     render() {
       const { Component } = this.props;
       const { mount, props } = this.state;
       if (!mount) return null;
       return (
         <Component {...props} />
       );
-    },
+    }
+  }
+  WrapperComponent.propTypes = {
+    Component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired,
+    props: PropTypes.object.isRequired,
+    context: PropTypes.object,
+  };
+  WrapperComponent.defaultProps = {
+    context: null,
   };
 
   if (options.context && (node.type.contextTypes || options.childContextTypes)) {
@@ -81,13 +72,10 @@ export default function createWrapperComponent(node, options = {}) {
     if (options.childContextTypes) {
       objectAssign(childContextTypes, options.childContextTypes);
     }
-    objectAssign(spec, {
-      childContextTypes,
-      getChildContext() {
-        return this.state.context;
-      },
-    });
+    WrapperComponent.prototype.getChildContext = function getChildContext() {
+      return this.state.context;
+    };
+    WrapperComponent.childContextTypes = childContextTypes;
   }
-
-  return React.createClass(spec);
+  return WrapperComponent;
 }