Support styled-components 4 (#238)

* Update to React 16.3; add styled-components; add failing test

* update enzyme; make sure the stateless functional components are functions

* check the type of the element, not the element itself; and detect specific elements in the output, not generic divs

* prettier

* try this

* try this

* try this

* ignore styled components

.flowconfig

@@ -5,6 +5,7 @@
 .*/node_modules/preact/.*
 .*/node_modules/@storybook/.*
 .*/node_modules/radium/.*
+.*/node_modules/styled-components/test-utils/.*
 
 [include]
 

package.json

@@ -66,8 +66,8 @@
     "chai": "4.1.2",
     "create-react-class": "15.6.2",
     "cross-env": "^5.1.3",
-    "enzyme": "3.0.0",
-    "enzyme-adapter-react-16": "^1.0.0",
+    "enzyme": "3.7.0",
+    "enzyme-adapter-react-16": "1.6.0",
     "eslint": "3.10.0",
     "eslint-config-airbnb": "12.0.0",
     "eslint-config-prettier": "^2.3.0",
@@ -96,15 +96,16 @@
     "preact-compat": "3.16.0",
     "prettier": "1.8.2",
     "prop-types": "15.5.8",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
+    "react": "16.5.2",
+    "react-dom": "16.5.2",
     "react-test-renderer": "16",
     "rollup": "^0.53.4",
     "rollup-plugin-babel": "^3.0.3",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.1",
     "sinon": "1.17.3",
     "sinon-chai": "2.8.0",
+    "styled-components": "^4.0.2",
     "tslint": "5.2.0",
     "typescript": "2.3.2",
     "webpack": "3.6.0"

src/helpers.js

@@ -41,7 +41,10 @@ export const isElementAnSFC = (element: Element<*>): boolean => {
     return false;
   }
 
-  return !element.type.prototype.isReactComponent;
+  return (
+    typeof element.type === 'function' &&
+    !element.type.prototype.isReactComponent
+  );
 };
 
 export function omit<R: {}, T: R>(obj: T, attrs: Array<$Keys<T>> = []): R {

test/index.spec.js

@@ -4,6 +4,7 @@
 import React, { Component } from 'react';
 import Enzyme, { shallow, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import styled from 'styled-components';
 
 import { getContainerBox, getTagPositions } from './helpers';
 import FlipMove from '../src/FlipMove';
@@ -582,4 +583,28 @@ Acceptable values are elevator, fade, accordionVertical, accordionHorizontal, no
       );
     });
   });
+
+  describe('styled components 4', () => {
+    it('should shallow-render styled components', () => {
+      const El = styled.div``;
+
+      const wrapper = mount(
+        <FlipMove>
+          <El key="a" id="a">
+            Test
+          </El>
+          <El key="b" id="b">
+            Test
+          </El>
+          <El key="c" id="c">
+            Test
+          </El>
+        </FlipMove>,
+      );
+
+      expect(wrapper.find('div#a').length).to.equal(1);
+      expect(wrapper.find('div#b').length).to.equal(1);
+      expect(wrapper.find('div#c').length).to.equal(1);
+    });
+  });
 });