Enhance toHaveStyle to accept JS as css

src/__tests__/to-have-style.js

@@ -1,6 +1,7 @@
 import {render} from './helpers/test-utils'
 import document from './helpers/document'
 
+// eslint-disable-next-line max-lines-per-function
 describe('.toHaveStyle', () => {
   test('handles positive test cases', () => {
     const {container} = render(`
@@ -144,4 +145,25 @@ describe('.toHaveStyle', () => {
       'whatever: anything',
     )
   })
+
+  test('handles styles as object', () => {
+    const {container} = render(`
+      <div class="label" style="background-color: blue; height: 100%">
+        Hello World
+      </div>
+    `)
+
+    expect(container.querySelector('.label')).toHaveStyle({
+      backgroundColor: 'blue',
+    })
+    expect(container.querySelector('.label')).toHaveStyle({
+      backgroundColor: 'blue',
+      height: '100%',
+    })
+    expect(container.querySelector('.label')).not.toHaveStyle({
+      backgroundColor: 'red',
+      height: '100%',
+    })
+    // expect(container.querySelector('.label')).not.toHaveStyle({ whatever: 'anything' })
+  })
 })

src/to-have-style.js

@@ -48,8 +48,19 @@ function expectedDiff(expected, computedStyles) {
   return diffOutput.replace(`${chalk.red('+ Received')}\n`, '')
 }
 
-export function toHaveStyle(htmlElement, css) {
+function getCss(document, css) {
+  if (typeof css === 'object') {
+    const sandboxElement = document.createElement('div')
+    Object.assign(sandboxElement.style, css)
+    return sandboxElement.style.cssText
+  }
+
+  return css
+}
+
+export function toHaveStyle(htmlElement, expectedCss) {
   checkHtmlElement(htmlElement, toHaveStyle, this)
+  const css = getCss(htmlElement.ownerDocument, expectedCss)
   const parsedCSS = parseCSS(css, toHaveStyle, this)
   const {getComputedStyle} = htmlElement.ownerDocument.defaultView