diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
index 0bb5526..d4d6a50 100644
--- a/src/toHaveStyleRule.js
+++ b/src/toHaveStyleRule.js
@@ -5,12 +5,15 @@ const shouldDive = node =>
const isTagWithClassName = node =>
node.exists() && node.prop("className") && typeof node.type() === "string";
-
+
+const isStyledClass = className =>
+ /^(\w+(-|_))?sc-/.test(className);
+
const hasClassName = node =>
- node.length > 0
- && typeof node.props === "function"
- && node.props("className")
- && node.props("className").className;
+ node.length > 0
+ && typeof node.props === "function"
+ && node.prop("className")
+ && isStyledClass(node.prop("className"))
const getClassNames = received => {
let className;
@@ -19,7 +22,7 @@ const getClassNames = 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;
+ className = received.prop("className");
} else if (typeof received.exists === "function" && received.exists()) {
const tree = shouldDive(received) ? received.dive() : received;
const components = tree.findWhere(isTagWithClassName);
@@ -76,7 +79,7 @@ const getModifiedClassName = (className, staticClassName, modifier = "") => {
};
const hasClassNames = (classNames, selectors, options) => {
- const staticClassNames = classNames.filter(x => /^(\w+(-|_))?sc-/.test(x));
+ const staticClassNames = classNames.filter(x => isStyledClass(x));
return classNames.some(className =>
staticClassNames.some(staticClassName =>
diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
index 43237aa..b22c195 100644
--- a/test/toHaveStyleRule.spec.js
+++ b/test/toHaveStyleRule.spec.js
@@ -483,13 +483,23 @@ it("nested with styling", () => {
const Wrapper = styled.section`
background: papayawhip;
`;
-
+ const Children = styled.span`
+ background: gray;
+ `;
const MyComponent = (props) => ;
const MyStyledComponent = styled(MyComponent)`
color: red;
`;
-
- toHaveStyleRule(, "color", "red");
+ const ParentComponent = (props) => (
+
+
+
+ );
+
+ toHaveStyleRule(, "color", "red");
+ toHaveStyleRule(, "color", "red");
+ expect(shallow().find(Children)).toHaveStyleRule("background", "gray");
+ expect(mount().find(Children)).toHaveStyleRule("background", "gray");
});
it("empty children", () => {