Jest-styled-components: Support styled-components v2

[ismay]

Since 1.4 is listed as a peerdependency I'm assuming it's only meant to work with v1. I'm asking because I'm using v2 and would like to use this lib as well, but I've been running into some issues (window is not defined on CI tests, even with testEnvironment: node). Wondering if that's expected because it isn't officially supported, or that I'm doing something wrong.

[MicheleBertoli]

Hello @ismay, thanks for opening this issue.
At the moment this package only works with v1 (I didn't even try it with v2).

However, it's something I absolutely want to address in the near future.
I'm leaving this open until it's done, and PRs are more than welcome.

[ismay]

Ok cool! I did try it with v2 btw, worked locally but interestingly it failed on travis. So it looked quite good already. I'll see what I can find after v2 has been released.

[Thr44]

Hi,

I'm getting an issue that an error is thrown, whether I use "testEnvironment": "node" or not, when I call :
toMatchStyledComponentsSnapshot() I get:

TypeError: styleSheet.rules is not a function

here's a complete test that is failing:

import React from 'react';
import renderer from 'react-test-renderer';
import styled from 'styled-components';

describe('styled Component Tests', () => {

  it('should render a styled h4', () => {
    const iconStyles = `
      margin-left: -2px;
      margin-right: 4px;
      margin-top: -3px;
    `;

    const H4 = styled.h4`${iconStyles}`;

    const container = renderer.create(
      <H4>"a label"</H4>
    ).toJSON();
    expect(container).toMatchStyledComponentsSnapshot();
  });

this relates to https://github.com/styled-components/jest-styled-components/issues/2

[kitten]

This will need to be updated for the v2 StyleSheet that @geelen updated recently to support async SSR 🙃

[ismay]

Ok, so it seems that only styleSheetSerializer needs to be updated. Am I correct in assuming that these two functions need to be replaced by the new api for capturing styles from renderToString? Because I'm not sure whether the node here is something that can be rendered by renderToString.

If it is then I wouldn't mind updating this for v2 (if not then any feedback on what needs to be done is very welcome :).

[MicheleBertoli]

Yes @ismay, I can confirm that the main idea is using the new StyleSheet APIs.
The node comes from the test renderer, you shouldn't have problems with that.
Please let me know if you need any help.
Thank you very much!

[kitten]

@MicheleBertoli the new StyleSheetManager might be able to help you since it'd allow you to separate stylesheets from one another extremely effortlessly.

I haven't looked through the code here yet, but does that sound helpful? You could also just use the context directly I guess

[MicheleBertoli]

Thank you very much, @philpl.
I'm sure is going to be straightforward with the new public APIs, I just didn't have time to do it :)
As far as I understand @ismay is working on it, otherwise I'll implement it on the weekend.

[ismay]

As far as I understand @ismay is working on it, otherwise I'll implement it on the weekend.

I was planning to, but don't have the time before the weekend. It's all yours :)!

[MicheleBertoli]

Sounds perfect, thanks @ismay.
If you don't mind I'm going to ask you to review my code.

I might also ping @philpl for some help.

Have a lovely day!

[ismay]

👍 No problem, I'd be happy to

Have a lovely day!

You too!

[MicheleBertoli]

I tried to run the package with Styled Components v2 (2.0.0-15) and, apart from a change in the class name (className="sc-bdVaJa iATjrR"), it works.
I guess we can close this for now, and support the v2 properly when it's stable.

[kitten]

@MicheleBertoli <= 2.0.0-15 are unfortunately released with the old v2 StyleSheet API, but >= 2.0.0-16 have the new one and are our release candidates :/ So these won't work

https://github.com/styled-components/styled-components/tags

[MicheleBertoli]

I see, thanks @philpl.
I run yarn add styled-components@next and I got [email protected].
This makes much more sense now :)

[kitten]

@MicheleBertoli the RC should be on the @rc tag :)

[MicheleBertoli]

Here we go #14
Feedback is welcome :)

[Thr44]

hi, lovely to see so many changes :)
class name (className="sc-bdVaJa iATjrR") is still an issue, right?

[MicheleBertoli]

I wouldn't define it an issue, but all the snapshots need to be updated when upgrading to v2.