From 577f4e7fc6c1ee38d89b9a39fa25446f397ecb78 Mon Sep 17 00:00:00 2001
From: functionalDev <pstolz2s@gmail.com>
Date: Mon, 9 Mar 2020 14:03:49 +0100
Subject: [PATCH] support shallow rendering when nesting styled components
 (#306)

---
 src/toHaveStyleRule.js       |  8 ++++++++
 test/toHaveStyleRule.spec.js | 13 +++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
index 0a2a994..d2b2b9c 100644
--- a/src/toHaveStyleRule.js
+++ b/src/toHaveStyleRule.js
@@ -5,6 +5,12 @@ const shouldDive = node =>
 
 const isTagWithClassName = node =>
   node.exists() && node.prop("className") && typeof node.type() === "string";
+  
+const hasClassName = node =>
+  node.length > 0 
+  && typeof node.props === "function" 
+  && node.props("className") 
+  && node.props("className").className;
 
 const getClassNames = received => {
   let className;
@@ -12,6 +18,8 @@ const getClassNames = received => {
   if (received) {
     if (received.$$typeof === Symbol.for("react.test.json")) {
       className = received.props.className || received.props.class;
+    } else if (hasClassName(received)) {
+      className = received.props("className").className;
     } else if (typeof received.exists === "function" && received.exists()) {
       const tree = shouldDive(received) ? received.dive() : received;
       const components = tree.findWhere(isTagWithClassName);
diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
index 34ec8da..e49036d 100644
--- a/test/toHaveStyleRule.spec.js
+++ b/test/toHaveStyleRule.spec.js
@@ -479,6 +479,19 @@ it("nested", () => {
   toHaveStyleRule(<MyComponent />, "background", "papayawhip");
 });
 
+it("nested with styling", () => {
+  const Wrapper = styled.section`
+    background: papayawhip;
+  `;
+
+  const MyComponent = (props) => <Wrapper {...props} />;
+  const MyStyledComponent = styled(MyComponent)`
+    color: red;
+  `;
+  
+  toHaveStyleRule(<MyStyledComponent/>, "color", "red");
+});
+
 it("empty children", () => {
   const Wrapper = styled.section`
     padding: 4em;