support shallow rendering when nesting styled components (#306) (#309)

Author: functionalDev

src/toHaveStyleRule.js

@@ -5,13 +5,21 @@ 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;
 
   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);

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;