fix: should not render when showProp is false

src/Animate.js

@@ -66,22 +66,22 @@ export default class Animate extends React.Component {
     this.keysToEnter = [];
     this.keysToLeave = [];
 
+    let children = toArrayChildren(getChildrenFromProps(this.props));
+    const showProp = this.props.showProp;
+    if (showProp) {
+      children = children.filter((child) => {
+        return !!child.props[showProp];
+      });
+    }
     this.state = {
-      children: toArrayChildren(getChildrenFromProps(this.props)),
+      children,
     };
 
     this.childrenRefs = {};
   }
 
   componentDidMount() {
-    const showProp = this.props.showProp;
-    let children = this.state.children;
-    if (showProp) {
-      children = children.filter((child) => {
-        return !!child.props[showProp];
-      });
-    }
-    children.forEach((child) => {
+    this.state.children.forEach((child) => {
       if (child) {
         this.performAppear(child.key);
       }

tests/single-common.spec.js

@@ -133,5 +133,23 @@ export default function test(createClass, title) {
         });
       });
     });
+
+    describe('when showProp is false', () => {
+      let instance;
+
+      before(() => {
+        const Component = createClass({});
+
+        instance = TestUtils.renderIntoDocument(<Component showProp="visible">
+          <sp visible={false}>showProp child</sp>
+        </Component>);
+      });
+
+      describe('when initial', () => {
+        it('will child not exist', () => {
+          expect(TestUtils.scryRenderedDOMComponentsWithTag(instance, 'sp')[0]).not.to.be.ok();
+        });
+      });
+    });
   });
 }

tests/single.spec.js

@@ -2,25 +2,39 @@
 
 import Animate from '../index';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import './index.spec.css';
 
 function createClass(options) {
   return class extends React.Component {
+    static propTypes = {
+      showProp: PropTypes.string,
+      children: PropTypes.any,
+    }
+
     state = {
       transitionEnter: options.transitionEnter,
       transitionAppear: options.transitionAppear,
     }
 
     render() {
+      const extProps = {};
+      if ('showProp' in this.props) {
+        extProps.showProp = this.props.showProp;
+      }
+
+      const children = this.props.children || <div key="1">child element</div>;
+
       return (
         <Animate
           ref="anim"
           transitionAppear={!!this.state.transitionAppear}
           transitionName="example"
           component={options.component}
+          {...extProps}
         >
-          {options.remove && !this.state.transitionEnter ? null : <div key="1">child element</div>}
+          {options.remove && !this.state.transitionEnter ? null : children}
         </Animate>
       );
     }