tests(react-jss): added tests for createUseStyles

Author: pranshuchittora

packages/react-jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 130189,
-    "minified": 46655,
-    "gzipped": 16051
+    "bundled": 171071,
+    "minified": 59339,
+    "gzipped": 19438
   },
   "dist/react-jss.min.js": {
-    "bundled": 103803,
-    "minified": 38662,
-    "gzipped": 13692
+    "bundled": 114048,
+    "minified": 42598,
+    "gzipped": 14460
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 26922,
-    "minified": 11621,
-    "gzipped": 3848
+    "bundled": 27447,
+    "minified": 12023,
+    "gzipped": 3885
   },
   "dist/react-jss.esm.js": {
-    "bundled": 25951,
-    "minified": 10777,
-    "gzipped": 3726,
+    "bundled": 25941,
+    "minified": 10783,
+    "gzipped": 3728,
     "treeshaked": {
       "rollup": {
         "code": 1838,

packages/react-jss/src/createUseStyles.test.js

@@ -1,16 +1,72 @@
 /* eslint-disable react/prop-types */
-import createUseStyles from './createUseStyles'
-import createBasicTests from '../test-utils/createBasicTests'
 
-const createStyledComponent = (styles, options) => {
-  const useStyles = createUseStyles(styles, options)
-  const Comp = props => {
-    useStyles(props)
-    return null
-  }
-  return Comp
+import expect from 'expect.js'
+import React from 'react'
+import TestRenderer from 'react-test-renderer'
+import {stripIndent} from 'common-tags'
+
+import {SheetsRegistry, JssProvider, ThemeProvider, createUseStyles} from '.'
+
+const createGenerateId = () => {
+  let counter = 0
+  return rule => `${rule.key}-${counter++}`
+}
+
+const theme: Object = {
+  background: 'yellow',
+  background2: 'red'
 }
 
 describe('React-JSS: createUseStyles', () => {
-  createBasicTests({createStyledComponent})
+  it('should render multiple elements with applied media query', () => {
+    const registry = new SheetsRegistry()
+    const useStyles = createUseStyles(themeObj => ({
+      wrapper: () => ({
+        padding: 40,
+        background: themeObj.background,
+        textAlign: 'left',
+        '@media (min-width: 1024px)': {
+          backgroundColor: themeObj.background2
+        }
+      })
+    }))
+
+    const Comp = () => {
+      const classes = useStyles(theme)
+      return <div className={classes.wrapper} />
+    }
+
+    const a = [1, 2]
+    TestRenderer.create(
+      <JssProvider registry={registry} generateId={createGenerateId()}>
+        <ThemeProvider theme={theme}>
+          {a.map(item => (
+            <Comp key={item} />
+          ))}
+        </ThemeProvider>
+      </JssProvider>
+    )
+    expect(registry.toString()).to.be(stripIndent`
+    .wrapper-0 {}
+    .wrapper-d0-1 {
+      padding: 40px;
+      background: yellow;
+      text-align: left;
+    }
+    @media (min-width: 1024px) {
+      .wrapper-d0-1 {
+        background-color: red;
+      }
+    }
+      .wrapper-d1-2 {
+        padding: 40px;
+        background: yellow;
+        text-align: left;
+      }
+    @media (min-width: 1024px) {
+      .wrapper-d1-2 {
+        background-color: red;
+      }
+    }`)
+  })
 })