Update to styled-components v4

[kaitmore]

• update dependencies
• refactor old api

[kaitmore]

It looks like jest-styled-components is still not compatible with v4. I tried using jest-styled-components@next, but our snapshots end up looking like:

exports[`Header matches snapshot 1`] = `
<StyledComponent
  forwardedComponent={
    Object {
      "$$typeof": Symbol(react.forward_ref),
      "attrs": Array [],
      "componentStyle": ComponentStyle {
        "componentId": "Header-sc-1q5kxkh-0",
        "isStatic": false,
        "rules": Array [
          "font-size:",
          [Function],
          ";font-family:",
          [Function],
          ";font-weight:",
          [Function],
          ";margin:0;display:inline-block;line-height:1.2;max-width:100%;position:relative;text-transform:capitalize;z-index:1;&::before{background-color:#000;content:\\"\\";display:block;filter:blur(",
          "12px",
          ");height:100%;left:0;position:absolute;top:0;width:108%;z-index:-1;}",
        ],
      },
      "defaultProps": Object {
 ...etc

Although it seems like the relevant issues have been closed in enzyme, I think we're waiting on enzyme to actually release these updates.

I've pushed up a branch 444-update-sc if anyone wants to take a closer look.

[kaitmore]

@tilleryd @shanberg

I wonder if we should consider dumping enzyme in favor of react-testing-library. I tried this example on one of our components and it came out perfectly. I really like the philosophy and it seems like the community as a whole is moving towards this library over enzyme. https://testing-library.com/docs/react-testing-library/intro

[shanberg]

If @tilleryd is on board, count me in.

[tilleryd]

The thing I like about react-testing-library is a return to more traditional DOM testing i.e. testing what's rendered on the page. I never really liked testing props and state because testing the various DOM changes should cover them. @kaitmore I'd be ok replacing Enzyme but please only create a backlog issue for now.