fix: support React 16 fragments

Resolves #127.
yocontra · Nov 14, 2017 · 36f8372 · 36f8372
1 parent 710c47d
commit 36f8372
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/dist/react-responsive.js b/dist/react-responsive.js
diff --git a/dist/react-responsive.js.map b/dist/react-responsive.js.map
diff --git a/dist/react-responsive.min.js b/dist/react-responsive.min.js
diff --git a/dist/react-responsive.min.js.map b/dist/react-responsive.min.js.map
diff --git a/src/index.js b/src/index.js
@@ -110,9 +110,7 @@ class MediaQuery extends React.Component {
     const hasMergeProps = Object.keys(props).length > 0
     const childrenCount = React.Children.count(this.props.children)
     const wrapChildren = this.props.component ||
-      childrenCount > 1 ||
       typeof this.props.children === 'string' ||
-      Array.isArray(this.props.children) && childrenCount == 1 ||
       this.props.children === undefined
     if (wrapChildren) {
       return React.createElement(

diff --git a/test/index_test.js b/test/index_test.js
@@ -54,24 +54,25 @@ describe('MediaQuery', function () {
       const e = TestUtils.renderIntoDocument(mq)
       assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'section'))
     })
-    it('renders a div when theres multiple children', function () {
+    it('does not render a div when there are multiple children', function () {
       const mq = (
         <MediaQuery query="all">
           <span className="childComponent"/>
           <span className="childComponent"/>
         </MediaQuery>
       )
       const e = TestUtils.renderIntoDocument(mq)
-      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'div'))
+      assert.throws(() => (TestUtils.findRenderedDOMComponentWithTag(e, 'div')), /Did not find exactly one match/)
     })
-    it('renders a div when children is a single-element array', function () {
+    it('renders the first child when children is a single-element array', function () {
       const mq = (
         <MediaQuery query="all">
           {[ 'single element' ].map((content, index) => <span key={index}>{content}</span>)}
         </MediaQuery>
       )
       const e = TestUtils.renderIntoDocument(mq)
-      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'div'))
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'span'))
+      assert.throws(() => (TestUtils.findRenderedDOMComponentWithTag(e, 'div')), /Did not find exactly one match/)
     })
     it('passes extra props', function () {
       const mq = (