added jest-emotion

Author: DavidChen-minted

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   globals: {
     NODE_ENV: 'test',
   },
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  snapshotSerializers: ['enzyme-to-json/serializer', 'jest-emotion'],
   transform: {
     '^.+\\.(j|t)sx?$': 'babel-jest',
   },

package-lock.json

@@ -68,6 +68,7 @@
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^1.6.1",
     "jest": "^24.8.0",
+    "jest-emotion": "^10.0.14",
     "lodash": "^4.17.14",
     "prettier": "^1.18.2",
     "typescript": "^3.5.3"

package.json

@@ -1,20 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loading should render without error 1`] = `
+.emotion-3 {
+  box-sizing: border-box;
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 11.25rem;
+  height: 2.5rem;
+  width: 100%;
+  -webkit-flex-flow: row;
+  -ms-flex-flow: row;
+  flex-flow: row;
+  -webkit-box-pack: space-evenly;
+  -webkit-justify-content: space-evenly;
+  -ms-flex-pack: space-evenly;
+  justify-content: space-evenly;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.emotion-3 > div {
+  width: 1.25rem;
+  height: 1.25rem;
+  opacity: 0.5;
+  background-color: skyblue;
+  -webkit-animation-name: scale;
+  animation-name: scale;
+  -webkit-animation-duration: 1200ms;
+  animation-duration: 1200ms;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.emotion-0 {
+  -webkit-animation-delay: 0ms;
+  animation-delay: 0ms;
+}
+
+.emotion-1 {
+  -webkit-animation-delay: 400ms;
+  animation-delay: 400ms;
+}
+
+.emotion-2 {
+  -webkit-animation-delay: 800ms;
+  animation-delay: 800ms;
+}
+
 <div
-  className="jsx-551631717"
+  className="emotion-3"
 >
   <div
-    className="jsx-660240691"
-    key="jsx-660240691"
+    className="emotion-0"
   />
   <div
-    className="jsx-4081925047"
-    key="jsx-4081925047"
+    className="emotion-1"
   />
   <div
-    className="jsx-4206995259"
-    key="jsx-4206995259"
+    className="emotion-2"
   />
 </div>
 `;