Inconsistent toHaveStyleRule testing results

[mattcarlotta]

I have a simple styled component that interpolates some CSS properties based upon passed in props:

import styled from "styled-components";

const Flex = styled.div`
  flex-direction: ${({ direction }) => direction || "row"};
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "nowrap")};
  justify-content: ${({ justify }) => justify || "start"};
`;

export default Flex;

And the accompanying test (jest + enzyme):

import Flex from "../index";

describe("Flex", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<Flex data-testid="flex" />);
  });

  it("renders without errors", () => {
    expect(wrapper).toExist();
    expect(wrapper).toHaveStyleRule("flex-direction", "row");
    expect(wrapper).toHaveStyleRule("flex-wrap", "nowrap");
    expect(wrapper).toHaveStyleRule("justify-content", "start");
  });

  it("sets 'flex-direction' to a 'column' when passed a 'direction' prop", () => {
    wrapper.setProps({ direction: "column" });
    expect(wrapper).toHaveStyleRule("flex-direction", "column");
  });

  it("sets 'flex-wrap' as a 'wrap' when passed a 'wrap' prop", () => {
    wrapper.setProps({ wrap: "true" });
    expect(wrapper).toHaveStyleRule("flex-wrap", "wrap");
  });

  it("sets 'justify-content' as a 'center' when passed a 'justify' prop", () => {
    wrapper.setProps({ justify: "center" });
    expect(wrapper).toHaveStyleRule("justify-content", "center");
  });
});

In this project, the test passes:

In this project, which is bootstrapped from the above, the same exact test fails:

[enjoijkee]

I just experienced almost the same thing.
Two same styled components in two different files, one file passed tests, another did not with No style rules found on passed Component. I found some related issues and everyone is talking about babel-plugin-styled-components, but I don't have it in my project so I don't have a clue what's going on here.

[mattcarlotta]

The problem is related to this issue which (unknown to me) was also mentioned here; on the same note, that recommended solution doesn't work. The workaround for me was to inline toHaveStyleRule within my project's test setup and by also removing the staticClassNames piece of code. Doing so, resulted in 100% expected test results. The solution can be found here. Until this gets fixed (or if it gets fixed -- this repo seems unmaintained), I'd recommend sticking to styled-components v4 & jest-styled-components v6 OR inlining the rule for styled-components v5 within your project.

[pkhodaveissi]

This is still happening with styled-componentV5 and jest-styled-componentV7

but it's alright with styled-componentV4 and jest-styled-componentV6

Are there any breaking changes in the latest versions?

[pkhodaveissi]

This is still happening with styled-componentV5 and jest-styled-componentV7

but it's alright with styled-componentV4 and jest-styled-componentV6

Are there any breaking changes in the latest versions?