fix: toBeVisible edge case for style values (#1640)

Author: mdjastrzebski

src/matchers/__tests__/to-be-visible.test.tsx

@@ -254,3 +254,12 @@ test('toBeVisible() on non-React elements', () => {
       Received has value: true"
     `);
 });
+
+test('toBeVisible() does not throw on invalid style', () => {
+  // @ts-expect-error: intentionally passing invalid style to
+  // trigger StyleSheet.flatten() returning undefined.
+  render(<View testID="view" style={0} />);
+
+  const view = screen.getByTestId('view');
+  expect(view).toBeVisible();
+});

src/matchers/to-be-visible.tsx

@@ -54,7 +54,6 @@ function isElementVisible(
 }
 
 function isHiddenForStyles(element: ReactTestInstance) {
-  const style = element.props.style ?? {};
-  const { display, opacity } = StyleSheet.flatten(style);
-  return display === 'none' || opacity === 0;
+  const flatStyle = StyleSheet.flatten(element.props.style);
+  return flatStyle?.display === 'none' || flatStyle?.opacity === 0;
 }