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(, "background", "papayawhip");
});
+it("nested with styling", () => {
+ const Wrapper = styled.section`
+ background: papayawhip;
+ `;
+
+ const MyComponent = (props) => ;
+ const MyStyledComponent = styled(MyComponent)`
+ color: red;
+ `;
+
+ toHaveStyleRule(, "color", "red");
+});
+
it("empty children", () => {
const Wrapper = styled.section`
padding: 4em;