refactor: add toBeEmptyElement assertion

README.md

@@ -42,7 +42,7 @@
 - [Matchers](#matchers)
   - [`toBeDisabled`](#tobedisabled)
   - [`toBeEnabled`](#tobeenabled)
-  - [`toBeEmpty`](#tobeempty)
+  - [`toBeEmptyElement`](#tobeemptyelement)
   - [`toContainElement`](#tocontainelement)
   - [`toHaveProp`](#tohaveprop)
   - [`toHaveTextContent`](#tohavetextcontent)
@@ -98,9 +98,9 @@ Alternatively, you can selectively import only the matchers you intend to use, a
 `expect` yourself:
 
 ```javascript
-import { toBeEmpty, toHaveTextContent } from '@testing-library/jest-native';
+import { toBeEmptyElement, toHaveTextContent } from '@testing-library/jest-native';
 
-expect.extend({ toBeEmpty, toHaveTextContent });
+expect.extend({ toBeEmptyElement, toHaveTextContent });
 ```
 
 ## Matchers
@@ -160,10 +160,10 @@ expect(getByTestId('button')).toBeEnabled();
 expect(getByTestId('input')).toBeEnabled();
 ```
 
-### `toBeEmpty`
+### `toBeEmptyElement`
 
 ```javascript
-toBeEmpty();
+toBeEmptyElement();
 ```
 
 Check that the given element has no content.
@@ -173,7 +173,7 @@ Check that the given element has no content.
 ```javascript
 const { getByTestId } = render(<View testID="empty" />);
 
-expect(getByTestId('empty')).toBeEmpty();
+expect(getByTestId('empty')).toBeEmptyElement();
 ```
 
 ### `toContainElement`

src/__tests__/to-be-empty.js → src/__tests__/to-be-empty-element.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import { render } from '@testing-library/react-native';
 
-test('.toBeEmpty', () => {
+test('.toBeEmptyElement', () => {
   const { queryByTestId } = render(
     <View testID="not-empty">
       <View testID="empty" />
@@ -14,17 +14,17 @@ test('.toBeEmpty', () => {
   const nonExistantElement = queryByTestId('not-exists');
   const fakeElement = { thisIsNot: 'an html element' };
 
-  expect(empty).toBeEmpty();
-  expect(notEmpty).not.toBeEmpty();
+  expect(empty).toBeEmptyElement();
+  expect(notEmpty).not.toBeEmptyElement();
 
   // negative test cases wrapped in throwError assertions for coverage.
-  expect(() => expect(empty).not.toBeEmpty()).toThrow();
+  expect(() => expect(empty).not.toBeEmptyElement()).toThrow();
 
-  expect(() => expect(notEmpty).toBeEmpty()).toThrow();
+  expect(() => expect(notEmpty).toBeEmptyElement()).toThrow();
 
-  expect(() => expect(fakeElement).toBeEmpty()).toThrow();
+  expect(() => expect(fakeElement).toBeEmptyElement()).toThrow();
 
   expect(() => {
-    expect(nonExistantElement).toBeEmpty();
+    expect(nonExistantElement).toBeEmptyElement();
   }).toThrow();
 });

src/index.js

@@ -1,5 +1,5 @@
 import { toBeDisabled, toBeEnabled } from './to-be-disabled';
-import { toBeEmpty } from './to-be-empty';
+import { toBeEmptyElement } from './to-be-empty-element';
 import { toHaveProp } from './to-have-prop';
 import { toHaveTextContent } from './to-have-text-content';
 import { toContainElement } from './to-contain-element';
@@ -8,7 +8,7 @@ import { toHaveStyle } from './to-have-style';
 export {
   toBeDisabled,
   toContainElement,
-  toBeEmpty,
+  toBeEmptyElement,
   toHaveProp,
   toHaveTextContent,
   toBeEnabled,

src/to-be-empty-element.js

@@ -0,0 +1,18 @@
+import { matcherHint } from 'jest-matcher-utils';
+import { checkReactElement, isEmpty, printElement } from './utils';
+
+export function toBeEmptyElement(element) {
+  checkReactElement(element, toBeEmptyElement, this);
+
+  return {
+    pass: isEmpty(element?.props?.children),
+    message: () => {
+      return [
+        matcherHint(`${this.isNot ? '.not' : ''}.toBeEmpty`, 'element', ''),
+        '',
+        'Received:',
+        printElement(element),
+      ].join('\n');
+    },
+  };
+}

src/to-be-empty.js

@@ -1,6 +1,10 @@
 import { matcherHint } from 'jest-matcher-utils';
 import { checkReactElement, isEmpty, printElement } from './utils';
 
+/**
+ * @deprecated This function is deprecated. You should use `toBeEmptyElement`
+ *
+ * */
 export function toBeEmpty(element) {
   checkReactElement(element, toBeEmpty, this);