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