Fix native toHaveStyleRule to work with object style props (#337)

Co-authored-by: Evan Jacobs <[email protected]>

src/native/toHaveStyleRule.js

@@ -1,7 +1,7 @@
 const { matcherTest, buildReturnMessage } = require('../utils');
 
-function toHaveStyleRule(component, property, expected) {
-  const styles = component.props.style.filter((x) => x);
+function toHaveStyleRule({ props: {style} }, property, expected) {
+  const styles = Array.isArray(style) ? style.filter(x => x) : style
 
   /**
    * Convert style name to camel case (so we can compare)
@@ -12,7 +12,10 @@ function toHaveStyleRule(component, property, expected) {
    * Merge all styles into one final style object and search for the desired
    * stylename against this object
    */
-  const mergedStyles = styles.reduce((acc, item) => (Object.assign({}, acc, item)), {});
+  const mergedStyles =
+    Array.isArray(styles)
+      ? styles.reduce((acc, item) => (Object.assign({}, acc, item)), {})
+      : styles
   const received = mergedStyles[camelCasedProperty];
   const pass = matcherTest(received, expected, this.isNot);
 

test/native/toHaveStyleRule.spec.js

@@ -150,3 +150,13 @@ it('theming', () => {
 
   expect(renderer.create(component).toJSON()).toHaveStyleRule('color', 'mediumseagreen');
 });
+
+it('style prop is an object', () => {
+  const StyledView = styled.TouchableOpacity`
+    background-color: papayawhip;
+  `;
+  const tree = renderer.create(<StyledView />).toJSON();
+
+  expect(typeof tree.props.style).toBe('object')
+  expect(tree).toHaveStyleRule('background-color', 'papayawhip');
+});