update snapshots to account for changes in later sc v5 betas

we do not enforce staticness in the test environment anymore, so the
emitted classname will be incremented by one now

package.json

@@ -49,7 +49,7 @@
     "react-is": "^16.8.6",
     "react-native": "^0.59.9",
     "react-test-renderer": "^16.8.0",
-    "styled-components": "beta",
+    "styled-components": "5.0.0-rc.1",
     "typescript": "^3.0.3"
   },
   "dependencies": {

test/__snapshots__/styleSheetSerializer.spec.js.snap

@@ -400,7 +400,7 @@ exports[`non-styled: shallow 1`] = `<div />`;
 exports[`null 1`] = `null`;
 
 exports[`referring to other components: mount 1`] = `
-.c0 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -414,18 +414,18 @@ exports[`referring to other components: mount 1`] = `
   color: palevioletred;
 }
 
-.c1 {
+.c2 {
   -webkit-transition: fill 0.25s;
   transition: fill 0.25s;
   width: 48px;
   height: 48px;
 }
 
-.c0:hover .c1 {
+.c0:hover .c2 {
   fill: rebeccapurple;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -437,17 +437,17 @@ exports[`referring to other components: mount 1`] = `
   line-height: 1.2;
 }
 
-.c2::before {
+.c3::before {
   content: '◀';
   margin: 0 10px;
 }
 
-.sc-fzXfLU .c3 {
+.sc-fzXfLU .c4 {
   color: yellow;
   background-color: green;
 }
 
-.sc-fzXfLU .c4 {
+.sc-fzXfLU .c5 {
   color: yellow;
   background-color: red;
 }
@@ -456,24 +456,24 @@ exports[`referring to other components: mount 1`] = `
   href="#"
 >
   <a
-    className="c0"
+    className="c0 c1"
     href="#"
   >
     <styled.svg>
       <svg
-        className="c1"
+        className="c2"
       />
     </styled.svg>
     <styled.span>
       <span
-        className="c2"
+        className="c3"
       >
         Hovering my parent changes my style!
       </span>
     </styled.span>
     <styled.span>
       <span
-        className="c3"
+        className="c4"
       >
         I should be green
       </span>
@@ -482,7 +482,7 @@ exports[`referring to other components: mount 1`] = `
       error={true}
     >
       <span
-        className="c4"
+        className="c5"
       >
         I should be red
       </span>
@@ -492,7 +492,7 @@ exports[`referring to other components: mount 1`] = `
 `;
 
 exports[`referring to other components: react-test-renderer 1`] = `
-.c0 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -506,18 +506,18 @@ exports[`referring to other components: react-test-renderer 1`] = `
   color: palevioletred;
 }
 
-.c1 {
+.c2 {
   -webkit-transition: fill 0.25s;
   transition: fill 0.25s;
   width: 48px;
   height: 48px;
 }
 
-.c0:hover .c1 {
+.c0:hover .c2 {
   fill: rebeccapurple;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -529,48 +529,48 @@ exports[`referring to other components: react-test-renderer 1`] = `
   line-height: 1.2;
 }
 
-.c2::before {
+.c3::before {
   content: '◀';
   margin: 0 10px;
 }
 
-.sc-fzXfLU .c3 {
+.sc-fzXfLU .c4 {
   color: yellow;
   background-color: green;
 }
 
-.sc-fzXfLU .c4 {
+.sc-fzXfLU .c5 {
   color: yellow;
   background-color: red;
 }
 
 <a
-  className="c0"
+  className="c0 c1"
   href="#"
 >
   <svg
-    className="c1"
+    className="c2"
   />
   <span
-    className="c2"
+    className="c3"
   >
     Hovering my parent changes my style!
   </span>
   <span
-    className="c3"
+    className="c4"
   >
     I should be green
   </span>
   <span
-    className="c4"
+    className="c5"
   >
     I should be red
   </span>
 </a>
 `;
 
 exports[`referring to other components: react-testing-library 1`] = `
-.c0 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -584,18 +584,18 @@ exports[`referring to other components: react-testing-library 1`] = `
   color: palevioletred;
 }
 
-.c1 {
+.c2 {
   -webkit-transition: fill 0.25s;
   transition: fill 0.25s;
   width: 48px;
   height: 48px;
 }
 
-.c0:hover .c1 {
+.c0:hover .c2 {
   fill: rebeccapurple;
 }
 
-.c2 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -607,40 +607,40 @@ exports[`referring to other components: react-testing-library 1`] = `
   line-height: 1.2;
 }
 
-.c2::before {
+.c3::before {
   content: '◀';
   margin: 0 10px;
 }
 
-.sc-fzXfLU .c3 {
+.sc-fzXfLU .c4 {
   color: yellow;
   background-color: green;
 }
 
-.sc-fzXfLU .c4 {
+.sc-fzXfLU .c5 {
   color: yellow;
   background-color: red;
 }
 
 <a
-  class="c0"
+  class="c0 c1"
   href="#"
 >
   <svg
-    class="c1"
+    class="c2"
   />
   <span
-    class="c2"
+    class="c3"
   >
     Hovering my parent changes my style!
   </span>
   <span
-    class="c3"
+    class="c4"
   >
     I should be green
   </span>
   <span
-    class="c4"
+    class="c5"
   >
     I should be red
   </span>