refactor: code review changes

Author: mdjastrzebski

src/matchers/__tests__/to-contain-element.test.tsx

@@ -17,7 +17,7 @@ test('toContainElement() supports basic case', () => {
 
  expect(() => expect(parent).not.toContainElement(child))
  .toThrowErrorMatchingInlineSnapshot(`
- "expect(element).not.toContainElement(element)
+ "expect(container).not.toContainElement(element)
 
  <View
  testID="parent"
@@ -44,10 +44,11 @@ test('toContainElement() supports negative case', () => {
  const view2 = screen.getByTestId('view2');
 
  expect(view1).not.toContainElement(view2);
+ expect(view2).not.toContainElement(view1);
 
  expect(() => expect(view1).toContainElement(view2))
  .toThrowErrorMatchingInlineSnapshot(`
- "expect(element).toContainElement(element)
+ "expect(container).toContainElement(element)
 
  <View
  testID="view1"
@@ -62,7 +63,21 @@ test('toContainElement() supports negative case', () => {
  `);
 });
 
-test('toContainElement() passing null', () => {
+test('toContainElement() handles null container', () => {
+ render(<View testID="view" />);
+
+ const view = screen.getByTestId('view');
+
+ expect(() => expect(null).toContainElement(view))
+ .toThrowErrorMatchingInlineSnapshot(`
+ "expect(received).toContainElement()
+
+ received value must be a host element.
+ Received has value: null"
+ `);
+});
+
+test('toContainElement() handles null element', () => {
  render(<View testID="view" />);
 
  const view = screen.getByTestId('view');
@@ -71,7 +86,7 @@ test('toContainElement() passing null', () => {
 
  expect(() => expect(view).toContainElement(null))
  .toThrowErrorMatchingInlineSnapshot(`
- "expect(element).toContainElement(element)
+ "expect(container).toContainElement(element)
 
  <View
  testID="view"
@@ -84,32 +99,18 @@ test('toContainElement() passing null', () => {
  `);
 });
 
-test('toContainElement() on null elements', () => {
- render(<View testID="view" />);
-
- const view = screen.getByTestId('view');
-
- expect(() => expect(null).toContainElement(view))
- .toThrowErrorMatchingInlineSnapshot(`
- "expect(received).toContainElement()
-
- received value must be a host element.
- Received has value: null"
- `);
-});
-
-test('toContainElement() on non-React elements', () => {
+test('toContainElement() handles non-element container', () => {
  render(<View testID="view" />);
 
  const view = screen.getByTestId('view');
 
- expect(() => expect({ name: 'Non-React element' }).not.toContainElement(view))
+ expect(() => expect({ name: 'non-element' }).not.toContainElement(view))
  .toThrowErrorMatchingInlineSnapshot(`
  "expect(received).not.toContainElement()
 
  received value must be a host element.
  Received has type: object
- Received has value: {"name": "Non-React element"}"
+ Received has value: {"name": "non-element"}"
  `);
 
  expect(() => expect(true).not.toContainElement(view))
@@ -122,30 +123,19 @@ test('toContainElement() on non-React elements', () => {
  `);
 });
 
-test('toContainElement() passing non-React element', () => {
+test('toContainElement() handles non-element element', () => {
  render(<View testID="view" />);
 
  const view = screen.getByTestId('view');
 
  expect(() =>
  // @ts-expect-error
- expect(view).not.toContainElement(true)
+ expect(view).not.toContainElement({ name: 'non-element' })
  ).toThrowErrorMatchingInlineSnapshot(`
  "expect(received).not.toContainElement()
 
  received value must be a host element.
- Received has type: boolean
- Received has value: true"
- `);
-});
-
-test('toContainElement() passing null on non-React element', () => {
- expect(() => expect(true).not.toContainElement(null))
- .toThrowErrorMatchingInlineSnapshot(`
- "expect(received).not.toContainElement()
-
- received value must be a host element.
- Received has type: boolean
- Received has value: true"
+ Received has type: object
+ Received has value: {"name": "non-element"}"
  `);
 });

src/matchers/to-contain-element.tsx

@@ -1,8 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import {
- matcherHint,
- RECEIVED_COLOR as receivedColor,
-} from 'jest-matcher-utils';
+import { matcherHint, RECEIVED_COLOR } from 'jest-matcher-utils';
 import { checkHostElement, formatElement } from './utils';
 
 export function toContainElement(
@@ -17,22 +14,21 @@ export function toContainElement(
  }
 
  let matches: ReactTestInstance[] = [];
-
  if (element) {
  matches = container.findAll((node) => node === element);
  }
 
  return {
- pass: Boolean(matches.length),
+ pass: matches.length > 0,
  message: () => {
  return [
  matcherHint(
  `${this.isNot ? '.not' : ''}.toContainElement`,
- 'element',
+ 'container',
  'element'
  ),
  '',
- receivedColor(`${formatElement(container)} ${
+ RECEIVED_COLOR(`${formatElement(container)} ${
  this.isNot ? '\n\ncontains:\n\n' : '\n\ndoes not contain:\n\n'
  } ${formatElement(element)}
  `),