add tests

gaearon · Jan 19, 2018 · 7923d79 · 7923d79
1 parent fe38ca7
commit 7923d79
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -46,9 +46,11 @@ const App = () => <div>Hello World!</div>
 
 export default hot(module)(App)
 ```
+
 `Hot` accepts only React Component (Stateful or Stateless), resulting the `HotExported` variant of it.
-The `hot` function will setup current module to _self-accept_ itself on reload, and will __ignore__ all the changes, made for non-React components.
-You may mark as much modules as you want. But `HotExportedComponent` __should be the only used export__ of a _hot_-module. 
+The `hot` function will setup current module to _self-accept_ itself on reload, and will **ignore** all the changes, made for non-React components.
+You may mark as much modules as you want. But `HotExportedComponent` **should be the only used export** of a _hot_-module.
+
 > Note: Please note how often we have used `exported` keyword. `hot` is for exports.
 
 > Note: does nothing in production mode, just passes App through.
@@ -96,6 +98,7 @@ export default hot(module)(App)
 ```
 
 ### Migrating from [create-react-app](https://github.com/facebookincubator/create-react-app) without ejecting
+
 Users [reports](https://github.com/gaearon/react-hot-loader/pull/729#issuecomment-354097936), that it is possible to use [react-app-rewire-hot-loader](https://github.com/cdharris/react-app-rewire-hot-loader) to setup React-hot-loader without ejecting.
 Follow [these code examples](https://github.com/Grimones/cra-rhl/commit/4ed74af2dc649301695f67df05a12f210fb7820c) to repeat the approach.
 

diff --git a/packages/react-hot-loader/src/reconciler/hotReplacementRender.js b/packages/react-hot-loader/src/reconciler/hotReplacementRender.js
@@ -164,9 +164,8 @@ const transformFlowNode = flow =>
   flow.reduce((acc, node) => {
     if (isFragmentNode(node) && node.props && node.props.children) {
       return [...acc, ...node.props.children]
-    } else {
-      return [...acc, node]
     }
+    return [...acc, node]
   }, [])
 
 const hotReplacementRender = (instance, stack) => {

diff --git a/packages/react-hot-loader/test/AppContainer.dev.test.js b/packages/react-hot-loader/test/AppContainer.dev.test.js
@@ -1456,6 +1456,79 @@ describe(`AppContainer (dev)`, () => {
       expect(wrapper.update().text()).toBe('PATCHED + 6 v2')
     })
 
+    it('hot-reloads children inside Fragments', () => {
+      if (React.version.startsWith('16')) {
+        const unmount = jest.fn()
+        class InnerComponent extends Component {
+          componentWillUnmount() {
+            unmount()
+          }
+
+          render() {
+            return <div>OldInnerComponent</div>
+          }
+        }
+        InnerComponent.displayName = 'InnerComponent'
+
+        const InnerItem = () => (
+          <React.Fragment>
+            -1-<InnerComponent />
+          </React.Fragment>
+        )
+        RHL.register(InnerItem, 'InnerItem', 'test.js')
+
+        const Item = () => (
+          <React.Fragment>
+            <li>1</li>
+            <li>
+              <InnerItem />
+            </li>
+            <li>3</li>
+          </React.Fragment>
+        )
+        //
+        const App = () => (
+          <ul>
+            <Item />
+          </ul>
+        )
+
+        const wrapper = mount(
+          <AppContainer>
+            <App />
+          </AppContainer>,
+        )
+
+        expect(wrapper.update().text()).toBe('1-1-OldInnerComponent3')
+        {
+          class InnerComponent extends Component {
+            componentWillUnmount() {
+              unmount()
+            }
+
+            render() {
+              return <div>NewInnerComponent</div>
+            }
+          }
+          InnerComponent.displayName = 'InnerComponent'
+
+          const InnerItem = () => (
+            <React.Fragment>
+              -2-<InnerComponent />
+            </React.Fragment>
+          )
+          RHL.register(InnerItem, 'InnerItem', 'test.js')
+
+          wrapper.setProps({ children: <App /> })
+        }
+        expect(unmount).toHaveBeenCalledTimes(0)
+        expect(wrapper.update().text()).toBe('1-2-NewInnerComponent3')
+      } else {
+        // React 15 is always ok
+        expect(true).toBe(true)
+      }
+    })
+
     it('hot-reloads children without losing state', () => {
       class App extends Component {
         constructor(props) {