Issue – "toHaveStyleRule" for imported components

[Balthasar42]

I have an issue with testing with "toHaveStyleRule" for imported components.

package.json

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "React and TypeScript example starter project",
  "keywords": [
    "typescript",
    "react",
    "starter"
  ],
  "main": "src/index.tsx",
  "dependencies": {
    "@testing-library/react": "11.2.5",
    "jest-styled-components": "^7.0.3",
    "next": "10.0.7",
    "polished": "^4.1.1",
    "react": "17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "styled-components": "^5.2.1",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "@percy/storybook": "^3.3.1",
    "@storybook/addon-a11y": "^6.1.20",
    "@storybook/addon-actions": "^6.1.20",
    "@storybook/addon-essentials": "^6.1.20",
    "@storybook/addon-links": "^6.1.20",
    "@storybook/react": "^6.1.20",
    "@testing-library/dom": "^7.29.6",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.8.0",
    "@types/color": "^3.0.1",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.31",
    "@types/react": "^17.0.2",
    "@types/react-modal": "^3.12.0",
    "@types/styled-components": "^5.1.7",
    "@types/styled-system": "^5.1.10",
    "@typescript-eslint/eslint-plugin": "^4.15.2",
    "@typescript-eslint/parser": "^4.15.2",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "jest": "^26.6.3",
    "jest-css-modules": "^2.1.0",
    "storybook-css-modules-preset": "^1.0.6",
    "typescript": "^4.2.2",
    "@types/react-dom": "17.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Button.tsx (Component)

import React from "react";
import styled from "styled-components";

export interface ButtonProps {
  label: string;
  color: string;
}

const Button = ({ label, ...rest }: ButtonProps) => {
  const StyledButton = styled.button`
    background-color: #000000;
    color: ${({ color }) => color};
    &:hover,
    &:active,
    &:focus {
      background-color: #111111;
      color: ${({ color }) => color};
    }
    &:focus {
      outline: 0;
    }
  `;

  return <StyledButton {...rest}>{label}</StyledButton>;
};

export default Button;

Button.test.tsx

The following test comes to an error that it can't found the style rules.

import React from "react";
import { render } from "@testing-library/react";
import Button from "./Button";
import styled from "styled-components";
import "jest-styled-components";

describe("<Button> component", () => {
  it("has the correct color", () => {
    const { container } = render(<Button color="#ffffff" label="Kaufen" />);
    expect(container.firstChild).toHaveStyleRule("color", "#ffffff");
    expect(container.firstChild).toHaveStyleRule("color", "#ffffff", {
      modifier: ":hover"
    });
  });
});

Button.test.tsx

This test works with a workarround.

import React from "react";
import { render } from "@testing-library/react";
import Button, { ButtonProps } from "./Button";
import styled from "styled-components";
import "jest-styled-components";

describe("<Button> component", () => {
  it("has the correct color", () => {
    const ButtonWrapper = styled(Button)<ButtonProps>``;
    const { container } = render(<ButtonWrapper color="#ffffff" label="Kaufen" />);
    expect(container.firstChild).toHaveStyleRule("color", "#ffffff");
    expect(container.firstChild).toHaveStyleRule("color", "#ffffff", {
      modifier: ":hover"
    });
  });
});

[wilomgfx]

I have a very similar issue, pretty much using the same dependencies as well.