Support React 16, fix jest coverage directory

Author: lttb

package.json

@@ -89,6 +89,7 @@
   ],
   "jest": {
     "rootDir": "src",
+    "coverageDirectory": "../coverage",
     "setupFiles": [
       "raf/polyfill"
     ]

src/injectStyled.js

@@ -1,9 +1,10 @@
 import {createElement} from 'react'
+import type {ComponentType} from 'react'
 
 import composeClasses from './utils/composeClasses'
 import type {StyledType} from './types'
 
-const injectStyled = (styled: StyledType) => (InnerComponent: ReactClass<any>) => {
+const injectStyled = (styled: StyledType) => (InnerComponent: ComponentType<any>) => {
   const sheet = styled.mountSheet()
 
   const classes = Object.keys(sheet.classes).reduce((acc, name) => ({

src/styled.js

@@ -24,12 +24,10 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
   const availableDynamicTagNames = []
   const classMap = {}
 
-  return class StyledElement extends Component {
+  return class StyledElement extends Component<StyledElementPropsType> {
     static tagName: string = tagName
     static style: ComponentStyleType = elementStyle
 
-    props: StyledElementPropsType
-
     dynamicTagName = ''
 
     sheet: JssSheet
@@ -76,15 +74,15 @@ const styled = ({tagName, elementStyle, mountSheet}: StyledArgs) => {
       for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
         rule = classMap[this.dynamicTagName][ruleIndex]
 
-        if (rule.name) this.sheet.update(rule.name, props)
+        if (rule.key) this.sheet.update(rule.key, props)
         if (rule.rules) rule.rules.update(props)
       }
     }
 
     render() {
       const {children, className, ...attrs} = this.props
 
-      const props = filterProps(attrs)
+      const props = filterProps(tagName, attrs)
       const tagClass = composeClasses([
         staticTagName && this.sheet.classes[staticTagName],
         this.dynamicTagName && this.sheet.classes[this.dynamicTagName],

src/tests/__snapshots__/functional.spec.jsx.snap

@@ -1,3 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`functional tests should update dynamic props for conditional rules 1`] = `
 ".button-1-id {
   padding: 10px;

src/tests/__snapshots__/index.spec.jsx.snap

@@ -1,87 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`base rendering tests renders correctly App with default Styled 1`] = `
 <div
-  className="div-8-0-8">
+  className="div-8-0-9"
+>
   <header
-    className="header-9-0-9">
+    className="header-9-0-10"
+  >
     <h1
-      className="h1-12-0-10">
+      className="h1-12-0-11"
+    >
       Title
     </h1>
   </header>
   <section
-    className="section-10-0-11"
-    data-name="content">
+    className="section-10-0-12"
+    data-name="content"
+  >
     <button
-      className="button-13-0-12">
+      className="button-13-0-13"
+    >
       primitive test
     </button>
     <button
-      className="button-14-0-13">
+      className="button-14-0-14"
+    >
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-11-0-14">
+    className="section-11-0-15"
+  >
     Another section
   </section>
 </div>
 `;
 
 exports[`base rendering tests renders correctly App with default styled 1`] = `
 <div
-  className="div-1-0-0">
+  className="div-1-0-1"
+>
   <header
-    className="header-2-0-1">
+    className="header-2-0-2"
+  >
     <h1
-      className="h1-5-0-2">
+      className="h1-5-0-3"
+    >
       Title
     </h1>
   </header>
   <section
-    className="section-3-0-3"
-    data-name="content">
+    className="section-3-0-4"
+    data-name="content"
+  >
     <button
-      className="button-6-0-4">
+      className="button-6-0-5"
+    >
       primitive test
     </button>
     <button
-      className="button-7-0-5">
+      className="button-7-0-6"
+    >
       dynamic primitive test
     </button>
   </section>
   <section
-    className="section-4-0-6">
+    className="section-4-0-7"
+  >
     Another section
   </section>
 </div>
 `;
 
 exports[`base rendering tests renders correctly App with injectStyled 1`] = `
 <div
-  className="root-0-15">
+  className="root-0-16"
+>
   <div
-    className="div-15-0-17">
+    className="div-15-0-18"
+  >
     <header
-      className="header-16-0-18">
+      className="header-16-0-19"
+    >
       <h1
-        className="h1-19-0-19">
+        className="h1-19-0-20"
+      >
         Title
       </h1>
     </header>
     <section
-      className="section-17-0-20"
-      data-name="content">
+      className="section-17-0-21"
+      data-name="content"
+    >
       <button
-        className="button-20-0-21">
+        className="button-20-0-22"
+      >
         primitive test
       </button>
       <button
-        className="button-21-0-22">
+        className="button-21-0-23"
+      >
         dynamic primitive test
       </button>
     </section>
     <section
-      className="section-18-0-23">
+      className="section-18-0-24"
+    >
       Another section
     </section>
   </div>

src/tests/functional.spec.jsx

@@ -1,6 +1,7 @@
 import 'react-dom'
 import React from 'react'
-import {mount} from 'enzyme'
+import Enzyme, {mount} from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 
 import {
   getCss,
@@ -9,21 +10,23 @@ import {
 
 import CreateApp from './App'
 
+Enzyme.configure({adapter: new Adapter()})
+
 let Styled
 let styled
 
 const mockNameGenerators = () => {
   let styledCounter = 0
 
   jest.mock('../utils/generateTagName')
-  jest.mock('jss/lib/utils/generateClassName')
+  jest.mock('jss/lib/utils/createGenerateClassName')
 
   const generateTagName = require('../utils/generateTagName').default
-  const generateClassName = require('jss/lib/utils/generateClassName').default
+  const createGenerateClassName = require('jss/lib/utils/createGenerateClassName').default
 
   // $FlowIgnore
   generateTagName.mockImplementation((tagName: string) => `${tagName}-${++styledCounter}`)
-  generateClassName.mockImplementation(rule => `${rule.name}-id`)
+  createGenerateClassName.mockImplementation(() => rule => `${rule.key}-id`)
 }
 
 const assertSheet = (sheet) => {

src/utils/filterProps.js

@@ -1,13 +1,14 @@
-import isReactProp from 'is-react-prop'
+import checkAttr from 'is-react-prop/checkAttr'
 
-export default (props: Object) => {
+export default (tagName: string, props: Object) => {
   const filtered = {}
   const propNames = Object.keys(props)
   let name
 
   for (let i = 0; i < propNames.length; i++) {
     name = propNames[i]
-    if (isReactProp(name)) {
+
+    if (checkAttr(tagName, name)) {
       filtered[name] = props[name]
     }
   }