[WIP] Support styled-components v4

[mbasso]

At the moment styled-components-test-utils supports only styled-components v2 and v3. This PR aims to support v4 with a new major release, discussed in #13.

[mbasso]

@alansouzati I've started working on the v4 support, at the moment I have some problems with the toMatchSnapshot matcher but everything else works fine. I've updated the toBeAGlobalStyle introducing a new parameter, can you please check it out and let me know if it seems good to you? 😄

[coveralls]

Coverage increased (+0.6%) to 90.606% when pulling d624c1f406cc793d7fb3ed0d879518d8870d2c30 on v2 into 6bfeae60b77a6fba07b6208c2d4ad8284ede887f on master.

[mbasso]

[email protected] is now available under the next tag. Just run:

npm install styled-components-test-utils@next

Please let me know if all works fine @alansouzati 😄

[alexkrautmann]

I tried using this today in an existing project that uses styled-components and noticed that adapting styles based on props is not working. I forked v2 and added some failing tests: https://github.com/alexkrautmann/styled-components-test-utils/tree/v2-dynamic-props.

Basically, when you write a component like this:

export const Button = styled.button`
  color: blue;
  background-color: red;
  display: ${props => props.hide ? 'none' : 'block'};
`;

The interpolated function does not evaluate during tests.

I'm starting to look deeper into this but thought I'd show you this first.

EDIT: I just realized my tests were false negatives, I updated the branch and now the tests are failing for the right reason.

[mbasso]

Hi @alexkrautmann, Thank you for feedback! Yeah, it seems that there is a problem with enzyme... Let me know if you are planning to create a PR with the fix, otherwise I'll try to fix it 😄

[alexkrautmann]

Hey @mbasso, I'll give it a shot. I'm not familiar with the internals of enzyme or styled-components though, so it might take a bit.

[alexkrautmann]

One thing I noticed is that all the shallow tests for toHaveStyleRule are false positives. If you run any of the react-test-renderer or enzyme shallow tests in isolation they will fail. The classes are not getting added to the Stylesheet so you get a Property not found error.

They pass when the entire suite runs because the tests are using the same button as previous tests where the Button class was properly added. I tried calling Stylesheet.reset(isServer()) in a beforeEach to fix the false positives but it didn't work.

I think in order to get rid of these false positives we have to create a unique styled-component for each test, possibly in a beforeEach.

For enzyme shallow, I think I can render the forwardedComponent similar to what is done for the "css api" in this project. I'll have to try this out later.

As a side note: I checked out jest-styled-component. It looks like v4 isn't working in that project either. I notice the code is very similar between this and jest-styled-components, I'm guessing one was ported from the other at some point? The code is so similar, it almost seems they should be one unified project for all testing frameworks.

[mbasso]

😱 this is a big problem. I have tried to reproduce it and it seems that there is also in the v1, so we need to find a solution as soon as possible. I agree with about the forwardedComponent instantiation and I don’t know why a Stylesheet.reset doesn’t work... I have to experiment a little bit

About your side note, please check out this issue #2

[mbasso]

I'm sorry, my fault, it works fine with the version 1 😅

[mbasso]

@alexkrautmann news about this?

[alexkrautmann]

@mbasso I'm truly sorry for not getting back onto this. The reality is I have moved onto other projects and priorities since I was looking into this last time. Hopefully I can have another look at some point.