move things around and add emotion + snapshots

Author: Kent C. Dodds

.babelrc.js

@@ -1,4 +1,5 @@
 const isTest = String(process.env.NODE_ENV) === 'test'
+const isProd = String(process.env.NODE_ENV) === 'production'
 
 module.exports = {
   presets: [
@@ -9,6 +10,15 @@ module.exports = {
     'babel-plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-object-rest-spread',
+    [
+      'babel-plugin-emotion',
+      {
+        hoist: isProd,
+        sourceMap: !isProd,
+        autoLabel: !isProd,
+        labelFormat: '[filename]--[local]',
+      },
+    ],
     'react-loadable/babel',
     isTest ? 'babel-plugin-dynamic-import-node' : null,
   ].filter(Boolean),

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  ...require('./other/jest-common.js'),
+  ...require('./test/jest-common'),
   collectCoverageFrom: ['**/src/**/*.js'],
   coverageThreshold: {
     global: {
@@ -16,8 +16,8 @@ module.exports = {
     },
   },
   projects: [
-    './other/jest.lint.js',
-    './other/jest.client.js',
-    './other/jest.server.js',
+    './test/jest.lint.js',
+    './test/jest.client.js',
+    './test/jest.server.js',
   ],
 }

package.json

@@ -37,9 +37,11 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^7.1.4",
     "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-emotion": "^9.2.4",
     "css-loader": "^0.28.11",
     "cypress": "^3.0.1",
     "cypress-testing-library": "^2.2.0",
+    "emotion": "^9.2.4",
     "eslint": "^5.0.1",
     "eslint-config-kentcdodds": "^14.0.0",
     "file-loader": "^1.1.11",
@@ -48,11 +50,13 @@
     "is-ci-cli": "^1.1.1",
     "jest": "^23.1.0",
     "jest-dom": "^1.3.1",
+    "jest-emotion": "^9.2.4",
     "jest-runner-eslint": "^0.6.0",
     "jest-watch-select-projects": "0.0.1",
     "jest-watch-typeahead": "^0.1.0",
     "lint-staged": "^7.2.0",
     "prop-types": "^15.6.2",
+    "react-emotion": "^9.2.4",
     "react-testing-library": "^4.0.2",
     "serve": "^9.1.0",
     "start-server-and-test": "^1.4.1",

src/__tests__/__snapshots__/calculator-display.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mounts 1`] = `
+.emotion-0 {
+  color: white;
+  background: #1c191c;
+  line-height: 130px;
+  font-size: 6em;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+<div
+  class="emotion-0"
+>
+  <div
+    class="autoScalingText"
+    style="transform: scale(1,1);"
+  >
+    0
+  </div>
+</div>
+`;

src/__tests__/calculator-display.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import {render} from 'react-testing-library'
+import CalculatorDisplay from '../calculator-display'
+
+test('mounts', () => {
+  const {container} = render(<CalculatorDisplay value="0" />)
+  expect(container.firstChild).toMatchSnapshot()
+})

src/calculator-display.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import AutoScalingText from './auto-scaling-text'
-import styles from './calculator-display.module.css'
 import {getFormattedValue} from './utils'
 
 class CalculatorDisplay extends React.Component {
@@ -16,7 +15,16 @@ class CalculatorDisplay extends React.Component {
     )
 
     return (
-      <div {...props} className={styles.calculatorDisplay}>
+      <div
+        {...props}
+        css={{
+          color: 'white',
+          background: '#1c191c',
+          lineHeight: '130px',
+          fontSize: '6em',
+          flex: '1',
+        }}
+      >
         <AutoScalingText>{formattedValue}</AutoScalingText>
       </div>
     )

src/calculator-display.module.css

@@ -8,7 +8,7 @@ module.exports = {
   moduleNameMapper: {
     // module must come first
     '\\.module\\.css$': 'identity-obj-proxy',
-    '\\.css$': require.resolve('../test/style-mock.js'),
+    '\\.css$': require.resolve('./style-mock.js'),
     // can also map files that are loaded by webpack with the file-loader
   },
   coveragePathIgnorePatterns: [

other/jest-common.js renamed to test/jest-common.js

@@ -2,7 +2,5 @@ module.exports = {
   ...require('./jest-common'),
   displayName: 'dom',
   testEnvironment: 'jest-environment-jsdom',
-  setupTestFrameworkScriptFile: require.resolve(
-    '../test/setup-test-framework.js',
-  ),
+  setupTestFrameworkScriptFile: require.resolve('./setup-test-framework.js'),
 }

other/jest.client.js renamed to test/jest.client.js

@@ -4,3 +4,9 @@ import 'react-testing-library/cleanup-after-each'
 
 // this adds jest-dom's custom assertions
 import 'jest-dom/extend-expect'
+
+// add jest-emotion serializer
+import {createSerializer} from 'jest-emotion'
+import * as emotion from 'emotion'
+
+expect.addSnapshotSerializer(createSerializer(emotion))