Does not work when StyleSheetManager is used with document.head

[lucaschen]

I'm using:

"@testing-library/react": "~9.4.0",
"jest-styled-components": "~7.0.0",
"styled-components": "~5.0.1",

I'm importing jest-styled-components in a global setup file; however, if I encase the following code in my components:

<StyleSheetManager target={document.head}>
  {/* my component(s) */}
</StyleSheetManager>

Then my output changes from something like this:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[` 1`] = `
.c1 {
  margin-top: 1rem;
}

.c0 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

<div
  class="c0"
  role="alert"
>
  <span
    class="c1"
  >
    The link you have provided is invalid.
  </span>
</div>
`;

To something like this:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[` 1`] = `
<div
  class="Errored__Wrapper-arw6js-1 hDTvjs"
  role="alert"
>
  <span
    class="Errored__Message-arw6js-0 doxHbk"
  >
    The link you have provided is invalid.
  </span>
</div>
`;