Fix toHaveStyleRule support classes with displayName prefix (#302)

* Fix support classes with displayName prefix Closes #290 #294 * simplify regexp on get classname * add unit test for custom prefix/display name
styled-components · Apr 9, 2020 · 4f772cf · 4f772cf
1 parent 6176d93
commit 4f772cf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/toHaveStyleRule.js b/src/toHaveStyleRule.js
@@ -76,7 +76,7 @@ const getModifiedClassName = (className, staticClassName, modifier = "") => {
 };
 
 const hasClassNames = (classNames, selectors, options) => {
-  const staticClassNames = classNames.filter(x => x.startsWith("sc-"));
+  const staticClassNames = classNames.filter(x => /^(\w+(-|_))?sc-/.test(x));
 
   return classNames.some(className =>
     staticClassNames.some(staticClassName =>

diff --git a/test/toHaveStyleRule.spec.js b/test/toHaveStyleRule.spec.js
@@ -504,3 +504,14 @@ it("empty children", () => {
 
   toHaveStyleRule(<Wrapper />, "background", "papayawhip");
 });
+
+it("custom display name prefix", () => {
+  const Text = styled.span.withConfig({ displayName: 'Text__sc' })`
+    color: red;
+  `;
+  const Comp = styled(Text).withConfig({ displayName: 'Comp__Sub-sc' })`
+    background: papayawhip;
+  `;
+  toHaveStyleRule(<Comp />, "background", "papayawhip");
+  toHaveStyleRule(<Comp />, "color", "red");
+});