fix: don't generate styled-jsx randomized classes in jest snapshots (#…

…332)

In test environments we should:

Use styled-jsx/babel-test instead of styled-jsx/babel
Mock the styled-jsx/css function as a no-op
This results in clean snapshot output without randomly-generated jsx-##### which change whenever any css changes. See the styled-jsx README

cli/config/app.babel.config.js

@@ -24,8 +24,22 @@ module.exports = {
 
         // Automatically include a React import when JSX is present
         require('babel-plugin-react-require'),
-
-        // Always build in "production" mode even when styled-jsx runtime may select "development"
-        [require('styled-jsx/babel'), { optimizeForSpeed: true }],
     ],
+    env: {
+        production: {
+            plugins: [
+                [require('styled-jsx/babel'), { optimizeForSpeed: true }],
+            ]
+        },
+        development: {
+            plugins: [
+                [require('styled-jsx/babel'), { optimizeForSpeed: true }],
+            ]
+        },
+        test: {
+            plugins: [
+                require('styled-jsx/babel-test')
+            ]
+        }
+    }
 }

cli/config/jest.config.js

@@ -8,5 +8,6 @@ module.exports = {
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': require.resolve(
             './jest.file.mock.js'
         ),
+        '^styled-jsx/(css|macro)$': require.resolve('./jest.styled-jsx-css.mock.js')
     },
 }

cli/config/jest.styled-jsx-css.mock.js

@@ -0,0 +1,5 @@
+const css = () => ''
+css.global = () => ''
+css.resolve = () => ''
+
+module.exports = css