accept RegExp values in toHaveStyleRule

README.md

@@ -207,7 +207,7 @@ test('it works', () => {
 # toHaveStyleRule
 
 The `toHaveStyleRule` matcher is useful to test if a given rule is applied to a component.
-The first argument is the expected property, the second is the expected value.
+The first argument is the expected property, the second is the expected value (string or RegExp).
 
 ```js
 test('it works', () => {

package.json

@@ -40,7 +40,6 @@
     "css": "^2.2.1"
   },
   "peerDependencies": {
-    "jest-matcher-utils": "^20.0.0",
     "styled-components": "^2.0.0"
   },
   "lint-staged": {

src/index.d.ts

@@ -1,5 +1,5 @@
 declare namespace jest {
   interface Matchers<R> {
-    toHaveStyleRule(property: string, value: string): R;
+    toHaveStyleRule(property: string, value: string | RegExp): R;
   }
 }

src/toHaveStyleRule.js

@@ -1,4 +1,3 @@
-const { printReceived, printExpected } = require('jest-matcher-utils')
 const { getCSS } = require('./utils')
 
 const getClassNames = received => {
@@ -37,36 +36,41 @@ const getDeclaration = (rule, property) =>
 const getDeclarations = (rules, property) =>
   rules.map(rule => getDeclaration(rule, property)).filter(Boolean)
 
-const die = property => ({
+const die = (utils, property) => ({
   pass: false,
-  message: `Property not found: ${printReceived(property)}`,
+  message: `Property not found: ${utils.printReceived(property)}`,
 })
 
-const toHaveStyleRule = (received, property, value) => {
+function toHaveStyleRule(received, property, value) {
   const classNames = getClassNames(received)
   const ast = getCSS()
   const rules = getRules(ast, classNames)
 
   if (!rules.length) {
-    return die(property)
+    return die(this.utils, property)
   }
 
   const declarations = getDeclarations(rules, property)
 
   if (!declarations.length) {
-    return die(property)
+    return die(this.utils, property)
   }
 
   const declaration = declarations.pop()
 
+  const pass =
+    value instanceof RegExp
+      ? value.test(declaration.value)
+      : value === declaration.value
+
   const message =
-    'Expected:\n' +
-    `  ${printExpected(`${property}: ${value}`)}\n` +
+    `Expected ${property}${pass ? ' not ' : ' '}to match:\n` +
+    `  ${this.utils.printExpected(value)}\n` +
     'Received:\n' +
-    `  ${printReceived(`${property}: ${declaration.value}`)}`
+    `  ${this.utils.printReceived(declaration.value)}`
 
   return {
-    pass: value === declaration.value,
+    pass,
     message,
   }
 }

test/toHaveStyleRule.spec.js

@@ -36,6 +36,15 @@ test('basic', () => {
   toHaveStyleRule(<Wrapper />, 'background', 'papayawhip')
 })
 
+test('regex', () => {
+  const Wrapper = styled.section`
+    padding: 4em;
+    background: papayawhip;
+  `
+
+  toHaveStyleRule(<Wrapper />, 'background', /^p/)
+})
+
 test('any component', () => {
   const Link = ({ className, children }) =>
     <a className={className}>