Merge pull request #4206 from storybooks/pksunkara/jest-emotion

Use @emotion/snapshot-serializer
storybookjs · Sep 20, 2018 · a6697e4 · a6697e4
2 parents 15711f1 + eb5f068
commit a6697e4
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 49 deletions.
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
@@ -1,6 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`addon Info should render <Info /> and external markdown 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
 <deprecated>
   <Story
     PropTable={[Function]}
@@ -1262,6 +1319,63 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
 `;
 
 exports[`addon Info should render <Info /> and markdown 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
 <deprecated>
   <Story
     PropTable={[Function]}

diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button with some emoji 1`] = `
+.emotion-0 {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 15px;
+  padding: 3px 10px;
+  margin: 10px;
+}
+
 <ForwardRef
   onClick={[Function]}
 >
@@ -23,6 +33,16 @@ exports[`Storyshots Another Button with some emoji 1`] = `
 `;
 
 exports[`Storyshots Another Button with text 1`] = `
+.emotion-0 {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 15px;
+  padding: 3px 10px;
+  margin: 10px;
+}
+
 <ForwardRef
   onClick={[Function]}
 >
@@ -46,6 +66,16 @@ exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
 `;
 
 exports[`Storyshots Button with some emoji 1`] = `
+.emotion-0 {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 15px;
+  padding: 3px 10px;
+  margin: 10px;
+}
+
 <ForwardRef
   onClick={[Function]}
 >
@@ -68,6 +98,16 @@ exports[`Storyshots Button with some emoji 1`] = `
 `;
 
 exports[`Storyshots Button with text 1`] = `
+.emotion-0 {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 15px;
+  padding: 3px 10px;
+  margin: 10px;
+}
+
 <ForwardRef
   onClick={[Function]}
 >
@@ -85,6 +125,50 @@ exports[`Storyshots Button with text 1`] = `
 `;
 
 exports[`Storyshots Welcome to Storybook 1`] = `
+.emotion-18 {
+  margin: 15px;
+  max-width: 600px;
+  line-height: 1.4;
+  font-family: "Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;
+}
+
+.emotion-2 {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border: 1px solid #eae9e9;
+  border-radius: 4px;
+  background-color: #f3f2f2;
+  color: #3a3a3a;
+}
+
+.emotion-4 {
+  color: #1474f3;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+}
+
+.emotion-12 {
+  color: #1474f3;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+}
+
+.emotion-16 {
+  opacity: 0.5;
+}
+
 <Welcome
   showApp={[Function]}
 >

diff --git a/jest.config.js b/jest.config.js
@@ -23,7 +23,7 @@ module.exports = {
     '<rootDir>/examples/official-storybook',
     '<rootDir>/examples/angular-cli',
   ],
-  snapshotSerializers: ['jest-emotion/serializer'],
+  snapshotSerializers: ['@emotion/snapshot-serializer'],
   transform: {
     '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
     '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',

diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "0.13.0",
     "@emotion/provider": "0.11.1",
+    "@emotion/snapshot-serializer": "0.8.1",
     "axe-core": "^3.1.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
@@ -91,7 +92,6 @@
     "concurrently": "^4.0.1",
     "cross-env": "^5.2.0",
     "danger": "^3.8.4",
-    "emotion": "9.2.8",
     "enzyme": "^3.5.0",
     "enzyme-adapter-react-16": "^1.3.0",
     "eslint": "^5.4.0",
@@ -112,7 +112,6 @@
     "jest-cli": "^23.4.2",
     "jest-config": "^23.4.2",
     "jest-diff": "^23.2.0",
-    "jest-emotion": "^9.2.7",
     "jest-environment-jsdom": "^23.4.0",
     "jest-enzyme": "^6.0.2",
     "jest-glamor-react": "^4.3.1",