chore: upgrade to styled-components 5

package.json

@@ -55,9 +55,9 @@
     "@fortawesome/fontawesome-free": "^5.0.0",
     "lodash": "^4.17.12",
     "moment": "^2.0.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "styled-components": "^4.3.2"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "styled-components": "^5.2.1"
   },
   "dependencies": {
     "classnames": "2.2.5",
@@ -92,10 +92,10 @@
     "babel-jest": "23.6.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-styled-components": "^1.12.0",
     "css-loader": "^1.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.4.0",
     "eslint": "4.19.1",
     "eslint-config-airbnb": "16.1.0",
@@ -115,23 +115,24 @@
     "html-webpack-plugin": "3.2.0",
     "husky": "^1.1.3",
     "jest": "^24.9.0",
-    "jest-styled-components": "^6.3.3",
+    "jest-styled-components": "^7.0.0",
     "less": "2.7.2",
     "lodash": "^4.17.12",
     "marked": "0.3.19",
     "moment": "2.21.0",
     "node-sass": "4.13.1",
     "prettier": "1.15.2",
-    "react": "16.9.0",
+    "react": "16.14.0",
     "react-docgen": "3.0.0-rc.0",
-    "react-dom": "16.9.0",
+    "react-dom": "16.14.0",
     "react-hot-loader": "4.3.7",
-    "react-test-renderer": "16.9.0",
+    "react-is": "^17.0.1",
+    "react-test-renderer": "16.14.0",
     "sass-loader": "7.1.0",
     "standard-version": "^8.0.1",
     "style-loader": "0.23.0",
-    "styled-components": "^4.3.2",
-    "styled-normalize": "^2.2.1",
+    "styled-components": "^5.2.1",
+    "styled-normalize": "^8.0.7",
     "stylelint": "13.2.1",
     "stylelint-config-recommended": "3.0.0",
     "stylelint-config-styled-components": "0.1.1",

src/components/Alert/__snapshots__/Alert.test.js.snap

@@ -197,7 +197,7 @@ exports[`<Alert /> snapshots renders success 1`] = `
 `;
 
 exports[`<Alert /> snapshots renders title if provided 1`] = `
-.c4 {
+.c3 {
   font-family: 'proxima-nova',Helvetica,Arial,sans-serif;
   color: hsl(0,0%,10%);
   font-size: 16px;
@@ -244,7 +244,7 @@ exports[`<Alert /> snapshots renders title if provided 1`] = `
   margin-bottom: 8px;
 }
 
-.c3 {
+.c4 {
   color: hsl(0,0%,100%);
   font-weight: bold;
 }

src/components/Code/Code.js

@@ -30,13 +30,13 @@ export const CopyNotice = styled.div`
   color: ${props => props.theme.colors.purple50};
   ${props =>
     props.isCopying &&
-    `
-    & > i {
+    css`
+      & > i {
         transform-origin: center;
-        animation-name: ${css(scale)};
-        animation-duration: .4s;
+        animation-name: ${scale};
+        animation-duration: 0.4s;
       }
-  `};
+    `};
 `;
 
 const CodeWrapper = styled.div`

src/components/Code/Code.test.js

@@ -1,86 +1,73 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import renderer from 'react-test-renderer';
 
 import { withTheme } from '../../utils/theme';
 
 import { CopyNotice } from './Code';
 
 import Code from '.';
 
+const getSnapShot = cmp => renderer.create(withTheme(cmp)).toJSON();
+
 document.execCommand = () => {};
 document.getSelection = () => ({
   toString: () => '',
 });
 
 describe('<Code />', () => {
-  let props;
-  let wrapper;
-  let onCopy;
-
-  beforeEach(() => {
-    onCopy = jest.fn();
-    props = {
-      onCopy,
-    };
-    wrapper = shallow(
-      <Code {...props}>such code much programming</Code>,
-      withTheme
-    );
-  });
-
   it('should call onCopy when the button is clicked', () => {
-    wrapper = mount(
-      withTheme(<Code {...props}>such code much programming</Code>)
+    const onCopy = jest.fn();
+    const wrapper = mount(
+      withTheme(<Code onCopy={onCopy}>such code much programming</Code>)
     );
     expect(onCopy).not.toHaveBeenCalled();
     wrapper.find(CopyNotice).simulate('click');
     expect(onCopy).toHaveBeenCalledTimes(1);
   });
 
   it('should render correctly', () => {
-    expect(wrapper.dive()).toMatchSnapshot();
+    const snapshot = getSnapShot(<Code>such code much programming</Code>);
+    expect(snapshot).toMatchSnapshot();
   });
 
   it('should render multi line string correctly with multiCommand=true', () => {
-    wrapper = shallow(
+    const snapshot = getSnapShot(
       <Code multiCommand>
         {`
 sudo curl -l git.io/scope -o /usr/local/bin/scope
 sudo chmod a+x /usr/local/bin/scope
 scope launch https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works
           `}
-      </Code>,
-      withTheme
+      </Code>
     );
-    expect(wrapper.dive()).toMatchSnapshot();
+    expect(snapshot).toMatchSnapshot();
   });
 
   it('should render multi line function correctly with multiCommand=true', () => {
-    wrapper = shallow(
+    const snapshot = getSnapShot(
       <Code multiCommand>
         {() => `
 sudo curl -l git.io/scope -o /usr/local/bin/scope
 sudo chmod a+x /usr/local/bin/scope
 scope launch https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works
       `}
-      </Code>,
-      withTheme
+      </Code>
     );
-    expect(wrapper.dive()).toMatchSnapshot();
+    expect(snapshot).toMatchSnapshot();
   });
 
   it('should render multi line jsx correctly with multiCommand=true', () => {
-    wrapper = shallow(
+    const snapshot = getSnapShot(
       <Code multiCommand>
         <div>sudo curl -L git.io/scope -o /usr/local/bin/scope</div>
         <div>sudo chmod a+x /usr/local/bin/scope</div>
         <div>
           scope launch <wbr />
           https://yjsjsubdx1h8un1f858gp7to8d51zdre@frontend.dev.weave.works
         </div>
-      </Code>,
-      withTheme
+      </Code>
     );
-    expect(wrapper.dive()).toMatchSnapshot();
+    expect(snapshot).toMatchSnapshot();
   });
 });