Bug description & fix

[geelen]

So, the bug is caused because the class names are influenced by the order in which the styled components are created. This is an unfortunate necessity, since we have nothing else to uniquely identify which component is which at runtime. So, doing this doesn't break the tests:

 import styled from 'styled-components';

-// export const Bar = styled.div``;
-
 export default styled.div`
        color: blue;
 `;
+
+export const Bar = styled.div``;

because Bar comes after export default so the order is unchanged.

The real solution is to use the babel transform in test, which bakes in unchanging component IDs instead of relying on runtime ordering. Also, the plugin to use is babel-plugin-styled-components rather than babel-plugin-styled-components-named. Here's the full diff of what I got working:

diff --git a/.babelrc b/.babelrc
index 0c2c933..5527f24 100644
--- a/.babelrc
+++ b/.babelrc
@@ -33,9 +33,14 @@
                }]
        ],
        "env": {
+               "test": {
+                       "plugins": [[
+                               "styled-components"
+                       ]]
+               },
                "development": {
                        "plugins": [[
-                               "styled-components-named",
+                               "styled-components",
                                "react-transform", {
                                        "transforms": [{
                                                "transform": "react-transform-hmr",
diff --git a/package.json b/package.json
index 0941fd6..1b39633 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,12 @@
     "styled-components": "^2.0.1"
   },
   "devDependencies": {
-    "babel-jest": "^16.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.5",
     "babel-plugin-module-alias": "^1.6.0",
     "babel-plugin-react-intl": "^2.2.0",
     "babel-plugin-react-transform": "^2.0.2",
glen@herp
> d
diff --git a/.babelrc b/.babelrc
index 0c2c933..5527f24 100644
--- a/.babelrc
+++ b/.babelrc
@@ -33,9 +33,14 @@
                }]
        ],
        "env": {
+               "test": {
+                       "plugins": [[
+                               "styled-components"
+                       ]]
+               },
                "development": {
                        "plugins": [[
-                               "styled-components-named",
+                               "styled-components",
                                "react-transform", {
                                        "transforms": [{
                                                "transform": "react-transform-hmr",
diff --git a/package.json b/package.json
index 0941fd6..1b39633 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,12 @@
     "styled-components": "^2.0.1"
   },
   "devDependencies": {
-    "babel-jest": "^16.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.5",
     "babel-plugin-module-alias": "^1.6.0",
     "babel-plugin-react-intl": "^2.2.0",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-plugin-styled-components-named": "^0.1.1",
+    "babel-plugin-styled-components": "^1.1.4",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-export-extensions": "^6.8.0",
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
index cd8a48c..f061649 100644
--- a/src/__snapshots__/App.test.js.snap
+++ b/src/__snapshots__/App.test.js.snap
@@ -1,6 +1,6 @@
 exports[`test renders without crashing 1`] = `
 <div
-  className="sc-bdVaJa fmDBXD">
+  className="components-eBJnFE enSiUx">
   Hello
 </div>
 `;