Remove not needed <div>

Enzyme 3 fails with fragments, see enzymejs/enzyme#1213 (comment)

Author: tkrotoff

examples/Bootstrap4/App.jsx

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { FormWithConstraints, FieldFeedback } from '../../src/index';
-import { FieldFeedbacks, FormGroup, FormControlLabel, FormControlInput } from '../../src/Bootstrap4';
+import { FormWithConstraints, FieldFeedbacks } from '../../src/index';
+import { FieldFeedback, FormGroup, FormControlLabel, FormControlInput } from '../../src/Bootstrap4';
 
 import './index.html';
 

src/Bootstrap4.tsx

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 
 import {
   Input, FormWithConstraintsChildContext,
-  FieldFeedbacks as FieldFeedbacks_, FieldFeedbacksProps
+  FieldFeedback as FieldFeedback_, FieldFeedbackProps
 } from './index';
 
 export interface FormGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -132,12 +132,12 @@ export class FormControlInput extends React.Component<FormControlInputProps> {
 }
 
 
-const FieldFeedbacks: React.SFC<FieldFeedbacksProps> = props => {
+const FieldFeedback: React.SFC<FieldFeedbackProps> = props => {
   const { className, children, ...other } = props;
   const classes = className !== undefined ? `${className} form-control-feedback` : 'form-control-feedback';
-  return <FieldFeedbacks_ {...other} className={classes}>{children}</FieldFeedbacks_>;
+  return <FieldFeedback_ {...other} className={classes}>{children}</FieldFeedback_>;
 };
-export { FieldFeedbacks };
+export { FieldFeedback };
 
 
 export interface LabelWithFormControlStyleProps extends React.LabelHTMLAttributes<HTMLLabelElement> {

src/FieldFeedbacks.test.tsx

@@ -211,7 +211,7 @@ describe('render()', () => {
       }
     });
     expect(component.html()).toEqual(
-      '<div><div><div class="error">Suffering from being missing</div></div></div>'
+      '<div><div class="error">Suffering from being missing</div></div>'
     );
   });
 
@@ -229,9 +229,7 @@ describe('render()', () => {
     expect(form.fieldsStore.fields).toEqual({
       username: fieldWithoutFeedback
     });
-    expect(component.html()).toEqual(
-      '<div></div>'
-    );
+    expect(component.html()).toEqual(null);
   });
 
   describe('show prop', () => {
@@ -259,7 +257,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div></div>'
+        '<div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div><div class="error">Suffering from being missing</div>'
       );
     });
 
@@ -287,7 +285,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div></div>'
+        '<div class="error">Suffering from being missing</div>'
       );
     });
 
@@ -315,7 +313,7 @@ describe('render()', () => {
       });
 
       expect(component.html()).toEqual(
-        '<div><div class="error">Suffering from being missing</div><div class="info">Suffering from being missing</div></div>'
+        '<div class="error">Suffering from being missing</div><div class="info">Suffering from being missing</div>'
       );
     });
   });
@@ -343,13 +341,11 @@ describe('reRender()', () => {
       }
     });
     expect(component.html()).toEqual(
-      '<div><div class="error">Suffering from being missing</div></div>'
+      '<div class="error">Suffering from being missing</div>'
     );
 
     form.fieldsStore.updateField('username', fieldWithoutFeedback);
-    expect(component.html()).toEqual(
-      '<div></div>'
-    );
+    expect(component.html()).toEqual(null);
   });
 
   test('unknown field updated', () => {
@@ -373,7 +369,7 @@ describe('reRender()', () => {
       }
     });
     expect(component.html()).toEqual(
-      '<div><div class="error">Suffering from being missing</div></div>'
+      '<div class="error">Suffering from being missing</div>'
     );
 
     const assert = console.assert;
@@ -387,7 +383,7 @@ describe('reRender()', () => {
     console.assert = assert;
 
     expect(component.html()).toEqual(
-      '<div><div class="error">Suffering from being missing</div></div>'
+      '<div class="error">Suffering from being missing</div>'
     );
   });
 });

src/FieldFeedbacks.tsx

@@ -7,7 +7,7 @@ import { EventEmitter } from './EventEmitter'; // FIXME See https://github.com/M
 import Input from './Input';
 import { FieldEvent } from './FieldsStore';
 
-export interface FieldFeedbacksProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface FieldFeedbacksProps {
   for: string;
 
   /**
@@ -116,7 +116,6 @@ export class FieldFeedbacks extends withValidateEventEmitter(FieldFeedbacksCompo
   }
 
   render() {
-    const { for: fieldName, show, children, ...divProps } = this.props;
-    return <div {...divProps}>{children}</div>;
+    return this.props.children;
   }
 }