Add jest-emotion

.flowconfig

@@ -21,3 +21,4 @@ module.name_mapper='^\(babel-plugin-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/s
 module.name_mapper='^\(emotion-theming\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
 module.name_mapper='^\(create-emotion-server\)$' -> '<PROJECT_ROOT>/packages/\1/src'
+module.name_mapper='^\(jest-emotion\)$' -> '<PROJECT_ROOT>/packages/\1/src'

docs/testing.md

@@ -4,24 +4,24 @@ Adding [snapshot tests with Jest](https://facebook.github.io/jest/docs/en/snapsh
 
 By diffing the serialized value of your React tree Jest can show you what changed in your app and allow you to fix it or update the snapshot.
 
-By default snapshots with emotion show generated class names. Adding [jest-glamor-react](https://github.com/kentcdodds/jest-glamor-react) allows you to output the actual styles being applied. 
+By default snapshots with emotion show generated class names. Adding [jest-emotion](https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion) allows you to output the actual styles being applied. 
 
 <img height="360px" src="https://user-images.githubusercontent.com/514026/31314015-02b79ca6-abc3-11e7-8f70-1edb31c7f43b.jpg"/>
 
 
 ### Installation
 
 ```bash
-npm install --save-dev jest-glamor-react
+npm install --save-dev jest-emotion
 ```
 
 **testSetup.js** _or_ at the top of your test file
 
 ```javascript
-import { sheet } from 'emotion'
-import serializer from 'jest-glamor-react'
+import * as emotion from 'emotion'
+import { createSerializer } from 'jest-emotion'
 
-expect.addSnapshotSerializer(serializer(sheet))
+expect.addSnapshotSerializer(createSerializer(emotion))
 ```
 
 **package.json**
@@ -49,7 +49,6 @@ test('Link renders correctly', () => {
 ```
 
 ### Notes
-It's recommended to set your Jest `testEnvironment` to `jsdom`, but you can mock global browser objects instead.
 
-Your snapshot class names will now appear as `glamor-[0...n]`
+Your snapshot class names will appear as `emotion-[0...n]` instead of `css-[hash]`.
 

jest.dist.json

@@ -11,6 +11,7 @@
     "^emotion-theming$": "<rootDir>/packages/emotion-theming/dist/index.cjs.js",
     "^babel-plugin-emotion": "<rootDir>/packages/babel-plugin-emotion/lib",
     "^create-emotion$": "<rootDir>/packages/create-emotion/dist/index.cjs.js",
+    "^jest-emotion$": "<rootDir>/packages/jest-emotion/lib",  
     "^create-emotion-styled$": "<rootDir>/packages/create-emotion-styled/dist/index.cjs.js",
     "^create-emotion-server$": "<rootDir>/packages/create-emotion-server/lib"    
   },

package.json

@@ -159,6 +159,7 @@
       "^emotion-theming$": "<rootDir>/packages/emotion-theming/src",
       "^babel-plugin-emotion": "<rootDir>/packages/babel-plugin-emotion/src",
       "^create-emotion$": "<rootDir>/packages/create-emotion/src",
+      "^jest-emotion$": "<rootDir>/packages/jest-emotion/src",
       "^create-emotion-styled$": "<rootDir>/packages/create-emotion-styled/src",
       "^create-emotion-server$": "<rootDir>/packages/create-emotion-server/src"
     },

packages/babel-plugin-emotion/test/macro/__snapshots__/css.test.js.snap

@@ -157,7 +157,7 @@ exports[`css flushes correctly 1`] = `
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="css-k008qs"
+  className="glamor-0"
 />
 `;
 
@@ -300,7 +300,7 @@ exports[`css nested selector without parent declaration 1`] = `
 
 exports[`css null rule 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 

packages/babel-plugin-emotion/test/macro/__snapshots__/react.test.js.snap

@@ -716,7 +716,7 @@ exports[`styled theming 1`] = `
   >
     <Styled(div)>
       <div
-        className="css-olgnlr css-yfjrs213"
+        className="glamor-0 glamor-1"
       >
         this will be green then pink
       </div>
@@ -743,7 +743,7 @@ exports[`styled theming 2`] = `
   >
     <Styled(div)>
       <div
-        className="css-olgnlr css-yfjrs213"
+        className="glamor-0 glamor-1"
       >
         this will be green then pink
       </div>

packages/create-emotion/test/__snapshots__/css.test.js.snap

@@ -136,8 +136,12 @@ exports[`css css variables 1`] = `
 `;
 
 exports[`css explicit & 1`] = `
+.glamor-0.another-class {
+  display: flex;
+}
+
 <div
-  className="css-gfk73z another-class"
+  className="glamor-0 another-class"
 />
 `;
 
@@ -149,7 +153,7 @@ exports[`css explicit & 2`] = `
 
 exports[`css explicit false 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 
@@ -195,7 +199,7 @@ exports[`css flushes correctly 1`] = `
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="css-vyoujf"
+  className="glamor-0"
 />
 `;
 
@@ -367,19 +371,19 @@ exports[`css nested selector without parent declaration 1`] = `
 
 exports[`css null rule 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 
 exports[`css null value 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 
 exports[`css null value 2`] = `
 <div
-  className="css-r6hgcc"
+  className="glamor-0"
 />
 `;
 

packages/create-emotion/test/__snapshots__/styled.test.js.snap

@@ -694,7 +694,7 @@ exports[`styled theming 1`] = `
   >
     <Styled(div)>
       <div
-        className="css-olgnlr css-10q4z3a31"
+        className="glamor-0 glamor-1"
       >
         this will be green then pink
       </div>
@@ -721,7 +721,7 @@ exports[`styled theming 2`] = `
   >
     <Styled(div)>
       <div
-        className="css-olgnlr css-10q4z3a31"
+        className="glamor-0 glamor-1"
       >
         this will be green then pink
       </div>
@@ -766,11 +766,11 @@ exports[`styled with higher order component that hoists statics 1`] = `
 />
 `;
 
-exports[`styled withComponent creates a new, unique stable class per invocation 1`] = `"css-10q4z3a46"`;
+exports[`styled withComponent creates a new, unique stable class per invocation 1`] = `"css-1mkg15o46"`;
 
-exports[`styled withComponent creates a new, unique stable class per invocation 2`] = `"css-10q4z3a47"`;
+exports[`styled withComponent creates a new, unique stable class per invocation 2`] = `"css-1mkg15o47"`;
 
-exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"css-10q4z3a48"`;
+exports[`styled withComponent creates a new, unique stable class per invocation 3`] = `"css-1mkg15o48"`;
 
 exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 .glamor-0 {

packages/create-emotion/test/css.test.js

@@ -1,10 +1,13 @@
 // @flow
 import React from 'react'
 import renderer from 'react-test-renderer'
-import serializer from 'jest-glamor-react'
+import { createSerializer } from 'jest-emotion'
+// eslint-disable-next-line import/no-duplicates
 import { css as differentCss, flush, sheet } from './emotion-instance'
+// eslint-disable-next-line import/no-duplicates
+import * as emotion from './emotion-instance'
 
-expect.addSnapshotSerializer(serializer(sheet))
+expect.addSnapshotSerializer(createSerializer(emotion))
 
 describe('css', () => {
   test('float property', () => {

packages/create-emotion/test/styled.test.js

@@ -1,8 +1,11 @@
 // @flow
 import React from 'react'
 import renderer from 'react-test-renderer'
-import styled, { css, flush, sheet } from './emotion-instance'
-import serializer from 'jest-glamor-react'
+// eslint-disable-next-line import/no-duplicates
+import styled, { css, flush } from './emotion-instance'
+// eslint-disable-next-line import/no-duplicates
+import * as emotion from './emotion-instance'
+import { createSerializer } from 'jest-emotion'
 import { ThemeProvider } from 'emotion-theming'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import { TARGET_KEY } from 'emotion-utils'
@@ -11,7 +14,7 @@ import enzymeToJson from 'enzyme-to-json'
 
 import { lighten, hiDPI, modularScale } from 'polished'
 
-expect.addSnapshotSerializer(serializer(sheet))
+expect.addSnapshotSerializer(createSerializer(emotion))
 
 describe('styled', () => {
   beforeEach(() => flush())

packages/emotion/test/__snapshots__/css.test.js.snap

@@ -152,8 +152,15 @@ exports[`css css variables 1`] = `
 `;
 
 exports[`css explicit & 1`] = `
+.glamor-0.another-class {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 <div
-  className="css-16ooeb3 another-class"
+  className="glamor-0 another-class"
 />
 `;
 
@@ -168,7 +175,7 @@ exports[`css explicit & 2`] = `
 
 exports[`css explicit false 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 
@@ -220,7 +227,7 @@ exports[`css flushes correctly 1`] = `
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="css-k008qs"
+  className="glamor-0"
 />
 `;
 
@@ -454,19 +461,19 @@ exports[`css nested selector without parent declaration 1`] = `
 
 exports[`css null rule 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 
 exports[`css null value 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;
 
 exports[`css null value 2`] = `
 <div
-  className="css-1xdhyk6"
+  className="glamor-0"
 />
 `;
 
@@ -527,6 +534,22 @@ exports[`css return function in interpolation 1`] = `
 />
 `;
 
+exports[`css rule after media query 1`] = `
+@media (min-width:600px) {
+  .glamor-0 {
+    color: green;
+  }
+}
+
+.glamor-0:hover {
+  color: hotpink;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css simple composition 1`] = `
 .glamor-0 {
   display: -webkit-box;

packages/emotion/test/css.test.js

@@ -388,4 +388,16 @@ describe('css', () => {
     const tree = renderer.create(<div className={cls1} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+  test('rule after media query', () => {
+    const cls1 = css`
+      @media (min-width: 600px) {
+        color: green;
+      }
+      &:hover {
+        color: hotpink;
+      }
+    `
+    const tree = renderer.create(<div className={cls1} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })

packages/emotion/test/extract/__snapshots__/extract.test.js.snap

@@ -2,23 +2,23 @@
 
 exports[`styled basic render nested 1`] = `
 <h1
-  className="css-s9f816 css-12dyp9e1"
+  className="glamor-0 glamor-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled className prop on styled 1`] = `
 <h1
-  className="some-class css-mdajr1 css-12dyp9e2"
+  className="some-class glamor-0 glamor-1"
 >
   hello world
 </h1>
 `;
 
 exports[`styled no dynamic 1`] = `
 <h1
-  className="css-dae0kw css-12dyp9e0"
+  className="glamor-0 glamor-1"
 >
   hello world
 </h1>

packages/emotion/test/no-babel/__snapshots__/index.test.js.snap

@@ -172,7 +172,7 @@ exports[`css no dynamic 1`] = `
 
 exports[`css null rule 1`] = `
 <div
-  className="css-0"
+  className="glamor-0"
 />
 `;