feat: add toBeVisible matcher

Author: fluiddot

README.md

@@ -47,6 +47,7 @@
  - [`toHaveProp`](#tohaveprop)
  - [`toHaveTextContent`](#tohavetextcontent)
  - [`toHaveStyle`](#tohavestyle)
+ - [`toBeVisible`](#tobevisible)
 - [Inspiration](#inspiration)
 - [Other solutions](#other-solutions)
 - [Contributors](#contributors)
@@ -298,6 +299,107 @@ expect(queryByText('Hello World')).toHaveStyle([{ color: 'black' }, { fontWeight
 expect(queryByText('Hello World')).not.toHaveStyle({ color: 'white' });
 ```
 
+### `toBeVisible`
+
+```typescript
+toBeVisible();
+```
+
+Check that the given element is visible.
+
+An element is visible if **all** the following conditions are met:
+
+- it does not have its style property `display` set to `none`.
+- it does not have its style property `opacity` set to `0`.
+- it is not a `Modal` component or it does not have the prop `visible` set to `false`.
+- its ancestor elements are also visible.
+
+#### Examples
+
+```javascript
+const { getByTestId } = render(<View testID="empty-view" />);
+
+expect(getByTestId('empty-view')).toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(<View testID="view-with-opacity" style={{ opacity: 0.2 }} />);
+
+expect(getByTestId('view-with-opacity')).toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(<Modal testID="empty-modal" />);
+
+expect(getByTestId('empty-modal')).toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(
+ <Modal>
+ <View>
+ <View testID="view-within-modal" />
+ </View>
+ </Modal>,
+);
+
+expect(getByTestId('view-within-modal')).toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(<View testID="invisible-view" style={{ opacity: 0 }} />);
+
+expect(getByTestId('invisible-view')).not.toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(<View testID="display-none-view" style={{ display: 'none' }} />);
+
+expect(getByTestId('display-none-view')).not.toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(
+ <View style={{ opacity: 0 }}>
+ <View>
+ <View testID="view-within-invisible-view" />
+ </View>
+ </View>,
+);
+
+expect(getByTestId('view-within-invisible-view')).not.toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(
+ <View style={{ display: 'none' }}>
+ <View>
+ <View testID="view-within-display-none-view" />
+ </View>
+ </View>,
+);
+
+expect(getByTestId('view-within-display-none-view')).not.toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(
+ <Modal visible={false}>
+ <View>
+ <View testID="view-within-not-visible-modal" />
+ </View>
+ </Modal>,
+);
+
+expect(getByTestId('view-within-not-visible-modal')).not.toBeVisible();
+```
+
+```javascript
+const { getByTestId } = render(<Modal testID="not-visible-modal" visible={false} />);
+
+expect(getByTestId('not-visible-modal')).not.toBeVisible();
+```
+
 ## Inspiration
 
 This library was made to be a companion for

extend-expect.d.ts

@@ -10,6 +10,7 @@ declare global {
  toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
  toBeEnabled(): R;
  toHaveStyle(style: object[] | object): R;
+ toBeVisible(): R;
  }
  }
 }

src/__tests__/to-be-visible.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Modal, View } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+describe('.toBeVisible', () => {
+ test.each([
+ ['Empty view', <View testID="test" />],
+ ['View with opacity', <View testID="test" style={{ opacity: 0.2 }} />],
+ ['Modal', <Modal testID="test" />],
+ [
+ 'View within modal',
+ <Modal>
+ <View>
+ <View testID="test" />
+ </View>
+ </Modal>,
+ ],
+ ])('handles positive test case: %s', (name, input) => {
+ const { getByTestId } = render(input);
+ expect(getByTestId('test')).toBeVisible();
+ });
+
+ test.each([
+ ['View with 0 opacity', <View testID="test" style={{ opacity: 0 }} />],
+ ["View with display 'none'", <View testID="test" style={{ display: 'none' }} />],
+ [
+ 'Ancestor view with 0 opacity',
+ <View style={{ opacity: 0 }}>
+ <View>
+ <View testID="test" />
+ </View>
+ </View>,
+ ],
+ [
+ "Ancestor view with display 'none'",
+ <View style={{ display: 'none' }}>
+ <View>
+ <View testID="test" />
+ </View>
+ </View>,
+ ],
+ [
+ 'View within not visible modal',
+ <Modal visible={false}>
+ <View>
+ <View testID="test" />
+ </View>
+ </Modal>,
+ ],
+ ['Not visible modal', <Modal testID="test" visible={false} />],
+ ])('handles negative test case: %s', (name, input) => {
+ const { getByTestId } = render(input);
+ expect(getByTestId('test')).not.toBeVisible();
+ });
+
+ it('handles non-React elements', () => {
+ expect(() => expect({ name: 'Non-React element' }).not.toBeVisible()).toThrowError();
+ expect(() => expect(true).not.toBeVisible()).toThrowError();
+ });
+});

src/index.js

@@ -4,6 +4,7 @@ import { toHaveProp } from './to-have-prop';
 import { toHaveTextContent } from './to-have-text-content';
 import { toContainElement } from './to-contain-element';
 import { toHaveStyle } from './to-have-style';
+import { toBeVisible } from './to-be-visible';
 
 export {
  toBeDisabled,
@@ -13,4 +14,5 @@ export {
  toHaveTextContent,
  toBeEnabled,
  toHaveStyle,
+ toBeVisible,
 };

src/to-be-visible.js

@@ -0,0 +1,39 @@
+import { matcherHint } from 'jest-matcher-utils';
+import { mergeAll } from 'ramda';
+
+import { checkReactElement, printElement } from './utils';
+
+function isStyleVisible(element) {
+ const style = element.props.style || {};
+ const { display = 'flex', opacity = 1 } = Array.isArray(style) ? mergeAll(style) : style;
+ return display !== 'none' && opacity !== 0;
+}
+
+function isAttributeVisible(element) {
+ return element.type !== 'Modal' || element.props.visible !== false;
+}
+
+function isElementVisible(element) {
+ return (
+ isStyleVisible(element) &&
+ isAttributeVisible(element) &&
+ (!element.parent || isElementVisible(element.parent))
+ );
+}
+
+export function toBeVisible(element) {
+ checkReactElement(element, toBeVisible, this);
+ const isVisible = isElementVisible(element);
+ return {
+ pass: isVisible,
+ message: () => {
+ const is = isVisible ? 'is' : 'is not';
+ return [
+ matcherHint(`${this.isNot ? '.not' : ''}.toBeVisible`, 'element', ''),
+ '',
+ `Received element ${is} visible:`,
+ printElement(element),
+ ].join('\n');
+ },
+ };
+}