Adds support for UNSAFE_componentWillMount and getDerivedStateFromProps.

ctrlplusb · Jul 10, 2018 · 2e43996 · 2e43996
1 parent 3c8890e
commit 2e43996
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 3 deletions.
diff --git a/src/__tests__/index.test.js b/src/__tests__/index.test.js
@@ -157,6 +157,60 @@ describe('reactTreeWalker', () => {
         )
       })
 
+      it('UNSAFE_componentWillMount', () => {
+        let actual = {}
+
+        class Foo extends Component {
+          constructor(props) {
+            super(props)
+            this.state = { foo: 'foo' }
+          }
+
+          UNSAFE_componentWillMount() {
+            this.setState({ foo: 'bar' })
+          }
+
+          render() {
+            actual = this.state
+            return h('div', null, this.state.foo)
+          }
+        }
+
+        return reactTreeWalker(h(Foo, { value: 'foo' }), () => true).then(
+          () => {
+            const expected = { foo: 'bar' }
+            expect(actual).toMatchObject(expected)
+          },
+        )
+      })
+
+      it('getDerivedStateFromProps', () => {
+        let actual = {}
+
+        class Foo extends Component {
+          constructor(props) {
+            super(props)
+            this.state = { foo: 'foo' }
+          }
+
+          static getDerivedStateFromProps(props, state) {
+            return { foo: `${state.foo}bar` }
+          }
+
+          render() {
+            actual = this.state
+            return h('div', null, this.state.foo)
+          }
+        }
+
+        return reactTreeWalker(h(Foo, { value: 'foo' }), () => true).then(
+          () => {
+            const expected = { foo: 'foobar' }
+            expect(actual).toMatchObject(expected)
+          },
+        )
+      })
+
       it('calls componentWillUnmount', () => {
         let called = true
 

diff --git a/src/index.js b/src/index.js
@@ -56,7 +56,9 @@ const ensureChild = child =>
 const getChildren = element =>
   element.props && element.props.children
     ? element.props.children
-    : element.children ? element.children : undefined
+    : element.children
+      ? element.children
+      : undefined
 
 // Preact uses "nodeName", React uses "type"
 const getType = element => element.type || element.nodeName
@@ -192,7 +194,9 @@ export default function reactTreeWalker(
               const instance = new Component(props, currentContext)
 
               // In case the user doesn't pass these to super in the constructor
-              instance.props = instance.props || props
+              Object.defineProperty(instance, 'props', {
+                value: instance.props || props,
+              })
               instance.context = instance.context || currentContext
               // set the instance state to null (not undefined) if not set, to match React behaviour
               instance.state = instance.state || null
@@ -210,7 +214,17 @@ export default function reactTreeWalker(
                 instance.state = Object.assign({}, instance.state, newState)
               }
 
-              if (instance.componentWillMount) {
+              if (Component.getDerivedStateFromProps) {
+                const result = Component.getDerivedStateFromProps(
+                  instance.props,
+                  instance.state,
+                )
+                if (result !== null) {
+                  instance.state = Object.assign({}, instance.state, result)
+                }
+              } else if (instance.UNSAFE_componentWillMount) {
+                instance.UNSAFE_componentWillMount()
+              } else if (instance.componentWillMount) {
                 instance.componentWillMount()
               }