fix: toHaveStyle assertion with invalid style (testing-library#564)

Given an invalid declaration such as `fontSize: 8`, due to the missing
unit, the `toHaveStyle` matcher should not pass the following test:

```
render(<div data-testid="element" style={{ fontSize: 8 }} />)
expect(screen.getByTestId('element')).toHaveStyle({ fontSize: 1 })
```

This PR fixes testing-library#564 by adding a more restrictive guard in the matcher's
logic.

src/__tests__/to-have-style.js

@@ -215,6 +215,15 @@ describe('.toHaveStyle', () => {
       })
     })
 
+    test('correctly matches invalid properties', () => {
+      const {queryByTestId} = render(`
+        <div data-testid="element" style="fontSize: 8" />
+      `)
+      expect(queryByTestId('element')).not.toHaveStyle({
+        fontSize: 1,
+      })
+    })
+
     test('Fails with an invalid unit', () => {
       const {queryByTestId} = render(`
         <span data-testid="color-example" style="font-size: 12rem">Hello World</span>

src/to-have-style.js

@@ -14,6 +14,14 @@ function getStyleDeclaration(document, css) {
   return styles
 }
 
+function isInvalidStyleDeclaration(name, value, computedStyle) {
+  return (
+    name &&
+    !value &&
+    !computedStyle[name] &&
+    !computedStyle.getPropertyValue(name)
+  )
+}
 function isSubset(styles, computedStyle) {
   return (
     !!Object.keys(styles).length &&
@@ -22,11 +30,16 @@ function isSubset(styles, computedStyle) {
       const spellingVariants = [prop]
       if (!isCustomProperty) spellingVariants.push(prop.toLowerCase())
 
-      return spellingVariants.some(
-        name =>
+      return spellingVariants.some(name => {
+        if (isInvalidStyleDeclaration(name, value, computedStyle)) {
+          return false
+        }
+
+        return (
           computedStyle[name] === value ||
-          computedStyle.getPropertyValue(name) === value,
-      )
+          computedStyle.getPropertyValue(name) === value
+        )
+      })
     })
   )
 }