New: Add option to return React.Fragment

Author: thomasthiebaud

package.json

@@ -9,7 +9,8 @@
     "commitmsg": "commitlint -E GIT_PARAMS",
     "lint": "tslint --project .",
     "lint:fix": "tslint --fix --project .",
-    "test": "jest --config ./config/jest.config.js"
+    "test": "jest --config ./config/jest.config.js",
+    "test:watch": "jest --config ./config/jest.config.js --watch"
   },
   "repository": {
     "type": "git",

src/config.ts

@@ -65,6 +65,7 @@ export interface Config {
   dom?: DOMConfig
   overrides?: SelectorsToElement,
   generatesKeys?: boolean,
+  useFragment?: boolean,
 }
 
 /**
@@ -86,6 +87,7 @@ const defaultConfig: Config = {
     ADD_ATTR: ['key'],
   },
   generatesKeys: false,
+  useFragment: false,
 }
 
 export function getConfig(config?: Partial<Config>): Config {

src/react.ts

@@ -98,8 +98,8 @@ function transform(element: EnrichedElement, options: Config) {
   }
 }
 
-export function render(nodes: NodeListOf<Node & ChildNode>, options: Config): React.ReactNode[] {
-  const elements = []
+export function render(nodes: NodeListOf<Node & ChildNode>, options: Config): React.ReactNode[] | React.ReactFragment {
+  const elements: React.ReactNode[] = []
 
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes.item(i)
@@ -111,5 +111,8 @@ export function render(nodes: NodeListOf<Node & ChildNode>, options: Config): Re
     }
   }
 
+  if (options.useFragment) {
+    return React.createElement(React.Fragment, null, ...elements)
+  }
   return elements
 }

tests/config.spec.ts

@@ -12,6 +12,7 @@ describe('Options', () => {
           RETURN_DOM_IMPORT: false,
         },
         generatesKeys: false,
+        useFragment: false,
       })
     })
 
@@ -30,6 +31,7 @@ describe('Options', () => {
           RETURN_DOM_IMPORT: false,
         },
         generatesKeys: false,
+        useFragment: false,
       })
     })
 
@@ -47,6 +49,7 @@ describe('Options', () => {
           RETURN_DOM_IMPORT: false,
         },
         generatesKeys: false,
+        useFragment: false,
       })
     })
   })

tests/react.spec.ts

@@ -3,46 +3,12 @@ import * as React from 'react'
 
 import { render } from '../src/react'
 
-function shallowWrapper(elements: React.ReactNode[]) {
+function shallowWrapper(elements: React.ReactNode[] | React.ReactFragment) {
   return shallow(React.createElement('div', null, elements))
 }
 
 describe('React', () => {
   describe('#render', () => {
-    describe('generatesKeys', () => {
-      it('should use key if provided', () => {
-        const div = document.createElement('div')
-        const link = document.createElement('a')
-        link.textContent = 'Link'
-        link.setAttribute('key', 'link')
-        div.appendChild(link)
-
-        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
-        expect(wrapper.find('a').key()).toEqual('link')
-      })
-
-      it('should use id if provided and key is not here', () => {
-        const div = document.createElement('div')
-        const link = document.createElement('a')
-        link.textContent = 'Link'
-        link.setAttribute('id', 'link')
-        div.appendChild(link)
-
-        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
-        expect(wrapper.find('a').key()).toEqual('link')
-      })
-
-      it('should use a random key if key nor id are specified', () => {
-        const div = document.createElement('div')
-        const link = document.createElement('a')
-        link.textContent = 'Link'
-        div.appendChild(link)
-
-        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
-        expect(wrapper.find('a').key()).toHaveLength(5)
-      })
-    })
-
     it('should render a element node', () => {
       const div = document.createElement('div')
       const link = document.createElement('a')
@@ -97,4 +63,52 @@ describe('React', () => {
       expect(wrapper.find('span').key()).toEqual('test')
     })
   })
+
+  describe('Options', () => {
+    describe('#useFragment', () => {
+      it('should return a Fragment', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { useFragment: true }))
+        expect(wrapper.find('a').text()).toEqual('Link')
+      })
+    })
+
+    describe('#generatesKeys', () => {
+      it('should use key if provided', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        link.setAttribute('key', 'link')
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
+        expect(wrapper.find('a').key()).toEqual('link')
+      })
+
+      it('should use id if provided and key is not here', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        link.setAttribute('id', 'link')
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
+        expect(wrapper.find('a').key()).toEqual('link')
+      })
+
+      it('should use a random key if key nor id are specified', () => {
+        const div = document.createElement('div')
+        const link = document.createElement('a')
+        link.textContent = 'Link'
+        div.appendChild(link)
+
+        const wrapper = shallowWrapper(render(div.childNodes, { generatesKeys: true }))
+        expect(wrapper.find('a').key()).toHaveLength(5)
+      })
+    })
+  })
 })