fix: Fragment with a single element. fixes #956

gaearon · May 1, 2018 · 7e80881 · 7e80881
1 parent 949f859
commit 7e80881
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/src/reconciler/hotReplacementRender.js b/src/reconciler/hotReplacementRender.js
@@ -215,7 +215,7 @@ const mergeInject = (a, b, instance) => {
 const transformFlowNode = flow =>
   flow.reduce((acc, node) => {
     if (isFragmentNode(node) && node.props && node.props.children) {
-      return [...acc, ...filterNullArray(node.props.children)]
+      return [...acc, ...filterNullArray(asArray(node.props.children))]
     }
     return [...acc, node]
   }, [])

diff --git a/test/AppContainer.dev.test.js b/test/AppContainer.dev.test.js
@@ -1871,6 +1871,69 @@ describe(`AppContainer (dev)`, () => {
       expect(wrapper.update().text()).toBe('PATCHED + 6 v2')
     })
 
+    it('hot-reloads children inside simple Fragments', () => {
+      if (React.version.startsWith('16')) {
+        const unmount = jest.fn()
+
+        class InnerComponent extends Component {
+          componentWillUnmount() {
+            unmount()
+          }
+
+          render() {
+            return <span>internal</span>
+          }
+        }
+        InnerComponent.displayName = 'InnerComponent'
+
+        const App = () => (
+          <React.Fragment>
+            <button>
+              text <InnerComponent />
+            </button>
+          </React.Fragment>
+        )
+
+        RHL.register(App, 'App', 'test.js')
+
+        const wrapper = mount(
+          <AppContainer>
+            <App />
+          </AppContainer>,
+        )
+
+        {
+          class InnerComponent extends Component {
+            componentWillUnmount() {
+              unmount()
+            }
+
+            render() {
+              return <span>internal</span>
+            }
+          }
+          InnerComponent.displayName = 'InnerComponent'
+
+          const App = () => (
+            <React.Fragment>
+              <button>
+                another text<InnerComponent />
+              </button>
+            </React.Fragment>
+          )
+          RHL.register(App, 'App', 'test.js')
+
+          wrapper.setProps({ children: <App /> })
+        }
+
+        expect(unmount).toHaveBeenCalledTimes(0)
+        expect(wrapper.update().text()).toBe('another textinternal')
+      } else {
+        // React 15 is always ok
+        expect(true).toBe(true)
+      }
+    })
+
     it('hot-reloads children inside Fragments', () => {
       if (React.version.startsWith('16')) {
         const unmount = jest.fn()
@@ -1904,6 +1967,9 @@ describe(`AppContainer (dev)`, () => {
               <InnerItem />
             </li>
             <li>3</li>
+            <React.Fragment>
+              <span>F</span>
+            </React.Fragment>
           </React.Fragment>
         )
         //
@@ -1920,7 +1986,7 @@ describe(`AppContainer (dev)`, () => {
         )
 
         expect(wrapper.update().text()).toBe(
-          '1-1-OldInnerComponent-3-OldInnerComponent3',
+          '1-1-OldInnerComponent-3-OldInnerComponent3F',
         )
         {
           class InnerComponent extends Component {
@@ -1941,6 +2007,9 @@ describe(`AppContainer (dev)`, () => {
               -2-<InnerComponent />
               {false && <div>hole</div>}
               -3-<InnerComponent />
+              <React.Fragment>
+                <span>*</span>
+              </React.Fragment>
             </React.Fragment>
           )
           RHL.register(InnerItem, 'InnerItem', 'test.js')
@@ -1949,7 +2018,7 @@ describe(`AppContainer (dev)`, () => {
         }
         expect(unmount).toHaveBeenCalledTimes(0)
         expect(wrapper.update().text()).toBe(
-          '1-2-NewInnerComponent-3-NewInnerComponent3',
+          '1-2-NewInnerComponent-3-NewInnerComponent*3F', // it should not be so!
         )
       } else {
         // React 15 is always ok