Replacing div with React Fragment

src/__snapshots__/client.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Client side Renders child component with context dependencies 1`] = `"<div>No errors! Context variable</div>"`;
+
+exports[`Client side Renders child component with legacy context dependencies 1`] = `"<div>No errors! Context variable</div>"`;
+
+exports[`Client side Renders child component with multiple contexts dependencies 1`] = `"<div>No errors! Context variable1 Context variable2 Context variable3</div>"`;
+
+exports[`Client side Renders child component without errors 1`] = `"<div>No errors!</div>"`;
+
+exports[`Client side Renders fallBack component if children rendering throws error 1`] = `"<div>FallBack!</div>"`;
+
+exports[`Client side Renders fallBack component if children rendering throws error with contexts 1`] = `"<div>FallBack!</div>"`;
+
+exports[`Client side Renders nothing when children rendering throws error and no fallBack provided 1`] = `null`;

src/__snapshots__/server.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Server side Renders child component with context dependencies 1`] = `"<div><div>No errors! Context variable</div></div>"`;
+
+exports[`Server side Renders child component with multiple new context dependencies 1`] = `"<div><div>No errors! Context variable1 Context variable2 Context variable3</div></div>"`;
+
+exports[`Server side Renders child component without errors 1`] = `"<div><div>No errors!</div></div>"`;
+
+exports[`Server side Renders fallBack component if children rendering throws error 1`] = `"<div>FallBack!</div>"`;
+
+exports[`Server side Renders fallBack component if children rendering throws error with new contexts 1`] = `"<div>FallBack!</div>"`;

src/client.test.js

@@ -33,7 +33,8 @@ describe('Client side', () => {
       <GoodComponent />
     </ErrorFallback>)
 
-    expect(component.html()).toBe('<div><div>No errors!</div></div>')
+expect(component.html()).toBe('<div>No errors!</div>')
+    expect(component.html()).toMatchSnapshot()
   })
 
   it('Renders fallBack component if children rendering throws error', () => {
@@ -46,7 +47,8 @@ describe('Client side', () => {
       <BadComponent />
     </ErrorFallback>)
 
-    expect(component.html()).toBe('<div><div>FallBack!</div></div>')
+expect(component.html()).toBe('<div>FallBack!</div>')
+    expect(component.html()).toMatchSnapshot()
     turnOnErrors()
   })
 
@@ -60,7 +62,8 @@ describe('Client side', () => {
       <BadComponent />
     </ErrorFallback>)
 
-    expect(component.html()).toBe('<div></div>')
+    expect(component.html()).toBe(null)
+    expect(component.html()).toMatchSnapshot()
     turnOnErrors()
   })
 
@@ -92,7 +95,8 @@ describe('Client side', () => {
       </ContextProvider>
     )
 
-    expect(component.html()).toBe('<div><div>No errors! Context variable</div></div>')
+    expect(component.html()).toBe('<div>No errors! Context variable</div>')
+    expect(component.html()).toMatchSnapshot()
   })
 
   it('Renders child component with context dependencies', () => {
@@ -122,7 +126,8 @@ describe('Client side', () => {
       </ContextProvider>
     )
 
-    expect(component.html()).toBe('<div><div>No errors! Context variable</div></div>')
+    expect(component.html()).toBe('<div>No errors! Context variable</div>')
+    expect(component.html()).toMatchSnapshot()
   })
 
   it('Renders child component with multiple contexts dependencies', () => {
@@ -168,7 +173,8 @@ describe('Client side', () => {
       </ContextProvider>
     )
 
-    expect(component.html()).toBe('<div><div>No errors! Context variable1 Context variable2 Context variable3</div></div>')
+    expect(component.html()).toBe('<div>No errors! Context variable1 Context variable2 Context variable3</div>')
+    expect(component.html()).toMatchSnapshot()
   })
 
   it('Renders fallBack component if children rendering throws error with contexts', () => {
@@ -203,7 +209,8 @@ describe('Client side', () => {
       </ContextProvider>
     )
 
-    expect(component.html()).toBe('<div><div>FallBack!</div></div>')
+    expect(component.html()).toBe('<div>FallBack!</div>')
+    expect(component.html()).toMatchSnapshot()
     turnOnErrors()
   })
 })

src/index.js

@@ -22,7 +22,7 @@ export function withContext (contextTypes = {}) {
 
     render () {
       if (server) return server._render(this, ProvideContext)
-      return <div>{this.state.hasError ? this.props.fallBack() : this.props.children}</div>
+      return <>{this.state.hasError ? this.props.fallBack() : this.props.children}</>
     }
   }
 

src/server.js

@@ -64,7 +64,7 @@ export function _render (self, ProvideContext) {
       const __html = renderToStaticMarkup(elementWithProviders)
       return <div dangerouslySetInnerHTML={{__html}} />
     } catch (e) {
-      return <div>{self.props.fallBack()}</div>
+      return <>{self.props.fallBack()}</>
     }
   })
 }

src/server.test.js

@@ -5,7 +5,7 @@ import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import ErrorFallback, { withContext } from './index'
 import { shim, clearContexts } from './server'
-shim();
+shim()
 
 function FallBack () {
   return <div>FallBack!</div>
@@ -32,6 +32,7 @@ describe('Server side', () => {
     </ErrorFallback>)
 
     expect(html).toBe('<div><div>No errors!</div></div>')
+    expect(html).toMatchSnapshot()
   })
 
   it('Renders fallBack component if children rendering throws error', () => {
@@ -44,7 +45,8 @@ describe('Server side', () => {
       <BadComponent />
     </ErrorFallback>)
 
-    expect(html).toBe('<div><div>FallBack!</div></div>')
+    expect(html).toBe('<div>FallBack!</div>')
+    expect(html).toMatchSnapshot()
     turnOnErrors()
   })
 
@@ -78,6 +80,7 @@ describe('Server side', () => {
     )
 
     expect(html).toBe('<div><div>No errors! Context variable</div></div>')
+    expect(html).toMatchSnapshot()
   })
 
   it('Renders child component with new context dependencies', () => {
@@ -155,6 +158,7 @@ describe('Server side', () => {
     )
 
     expect(html).toBe('<div><div>No errors! Context variable1 Context variable2 Context variable3</div></div>')
+    expect(html).toMatchSnapshot()
     clearContexts()
   })
 
@@ -190,7 +194,8 @@ describe('Server side', () => {
       </ContextProvider>
     )
 
-    expect(html).toBe('<div><div>FallBack!</div></div>')
+    expect(html).toBe('<div>FallBack!</div>')
+    expect(html).toMatchSnapshot()
     turnOnErrors()
     clearContexts()
   })