fix(dependencies): update outdated dependencies and tests (#78)

package.json

@@ -29,28 +29,28 @@
   ],
   "dependencies": {
     "chalk": "^2.4.1",
-    "jest-diff": "^24.0.0",
-    "jest-matcher-utils": "^24.0.0",
+    "jest-diff": "^27.4.6",
+    "jest-matcher-utils": "^27.4.6",
     "pretty-format": "^27.3.1",
     "ramda": "^0.26.1",
     "redent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.4.0",
-    "@babel/runtime": "7.4.0",
-    "@testing-library/react-native": "^6.0.0",
-    "commitizen": "^3.0.7",
+    "@babel/cli": "^7.13.6",
+    "@babel/core": "7.15.8",
+    "@babel/runtime": "^7.17.9",
+    "@testing-library/react-native": "^9.1.0",
+    "commitizen": "^3.1.2",
     "cz-conventional-changelog": "^2.1.0",
     "husky": "^1.3.1",
     "jest": "^27.0.6",
-    "metro-react-native-babel-preset": "^0.52.0",
+    "metro-react-native-babel-preset": "^0.70.3",
     "prettier": "^1.16.4",
     "pretty-quick": "^1.10.0",
-    "react": "16.8.6",
-    "react-native": "0.63.2",
-    "react-test-renderer": "16.8.6",
-    "semantic-release": "^15.13.3"
+    "react": "17.0.2",
+    "react-native": "^0.66.4",
+    "react-test-renderer": "^17.0.1",
+    "semantic-release": "^15.14.0"
   },
   "husky": {
     "hooks": {

src/__tests__/to-be-disabled.js

@@ -13,7 +13,6 @@ import { render } from '@testing-library/react-native';
 
 const ALLOWED_COMPONENTS = {
   View,
-  Button,
   TextInput,
   TouchableHighlight,
   TouchableOpacity,
@@ -25,17 +24,10 @@ const ALLOWED_COMPONENTS = {
 describe('.toBeDisabled', () => {
   Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled prop for element ${name}`, () => {
-      const { queryByTestId } = render(<Component disabled testID={name} />);
-
-      expect(queryByTestId(name)).toBeDisabled();
-      expect(() => expect(queryByTestId(name)).not.toBeDisabled()).toThrowError();
-    });
-  });
-
-  Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
-    test(`handle disabled in accessibilityStates for element ${name}`, () => {
       const { queryByTestId } = render(
-        <Component accessibilityStates={['disabled']} testID={name} />,
+        <Component disabled testID={name}>
+          <TextInput />
+        </Component>,
       );
 
       expect(queryByTestId(name)).toBeDisabled();
@@ -46,7 +38,9 @@ describe('.toBeDisabled', () => {
   Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled in accessibilityState for element ${name}`, () => {
       const { queryByTestId } = render(
-        <Component accessibilityState={{ disabled: true }} testID={name} />,
+        <Component accessibilityState={{ disabled: true }} testID={name}>
+          <TextInput />
+        </Component>,
       );
 
       expect(queryByTestId(name)).toBeDisabled();
@@ -58,16 +52,11 @@ describe('.toBeDisabled', () => {
 describe('.toBeEnabled', () => {
   Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled prop for element ${name} when undefined`, () => {
-      const { queryByTestId } = render(<Component testID={name} />);
-
-      expect(queryByTestId(name)).toBeEnabled();
-      expect(() => expect(queryByTestId(name)).not.toBeEnabled()).toThrowError();
-    });
-  });
-
-  Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
-    test(`handle disabled in accessibilityStates for element ${name} when not included`, () => {
-      const { queryByTestId } = render(<Component accessibilityStates={[]} testID={name} />);
+      const { queryByTestId } = render(
+        <Component testID={name}>
+          <TextInput />
+        </Component>,
+      );
 
       expect(queryByTestId(name)).toBeEnabled();
       expect(() => expect(queryByTestId(name)).not.toBeEnabled()).toThrowError();
@@ -77,7 +66,9 @@ describe('.toBeEnabled', () => {
   Object.entries(ALLOWED_COMPONENTS).forEach(([name, Component]) => {
     test(`handle disabled in accessibilityState for element ${name} when false`, () => {
       const { queryByTestId } = render(
-        <Component accessibilityState={{ disabled: false }} testID={name} />,
+        <Component accessibilityState={{ disabled: false }} testID={name}>
+          <TextInput />
+        </Component>,
       );
 
       expect(queryByTestId(name)).toBeEnabled();
@@ -86,14 +77,40 @@ describe('.toBeEnabled', () => {
   });
 });
 
-test('matcher misses', () => {
-  const { queryByTestId, queryByTitle } = render(
-    <View testID="view">
-      <Button testID="enabled" title="enabled" />
-      <Button disabled testID="disabled" title="disabled" />
-    </View>,
-  );
+describe('for .toBeEnabled/Disabled Button', () => {
+  test('handles disabled prop for button', () => {
+    const { queryByTestId } = render(
+      <View testID="view">
+        <Button testID="enabled" title="enabled" />
+        <Button disabled testID="disabled" title="disabled" />
+      </View>,
+    );
+
+    expect(queryByTestId('enabled')).toBeEnabled();
+    expect(queryByTestId('disabled')).toBeDisabled();
+  });
+
+  test('handles button a11y state', () => {
+    const { queryByTestId } = render(
+      <View testID="view">
+        <Button accessibilityState={{ disabled: false }} testID="enabled" title="enabled" />
+        <Button accessibilityState={{ disabled: true }} testID="disabled" title="disabled" />
+      </View>,
+    );
+
+    expect(queryByTestId('enabled')).toBeEnabled();
+    expect(queryByTestId('disabled')).toBeDisabled();
+  });
+
+  test('Errors when matcher misses', () => {
+    const { queryByTestId, queryByTitle } = render(
+      <View testID="view">
+        <Button testID="enabled" title="enabled" />
+        <Button disabled testID="disabled" title="disabled" />
+      </View>,
+    );
 
-  expect(() => expect(queryByTestId('enabled')).toBeDisabled()).toThrowError();
-  expect(() => expect(queryByTitle('disabled')).toBeEnabled()).toThrowError();
+    expect(() => expect(queryByTestId('enabled')).toBeDisabled()).toThrowError();
+    expect(() => expect(queryByTitle('disabled')).toBeEnabled()).toThrowError();
+  });
 });

src/__tests__/to-contain-element.js

@@ -28,6 +28,16 @@ test('.toContainElement positive test cases', () => {
   expect(child).not.toContainElement(grandparent);
   expect(child).not.toContainElement(textElement);
   expect(grandparent).not.toContainElement(nonExistantElement);
+  expect(child).not.toContainElement(nonExistantElement);
+  expect(parent).not.toContainElement(nonExistantElement);
+  expect(textElement).not.toContainElement(grandparent);
+  expect(textElement).not.toContainElement(parent);
+  expect(textElement).not.toContainElement(child);
+
+  // obscure cases
+  expect(() => expect(child).toContainElement(null)).toThrowError();
+  expect(() => expect(parent).toContainElement(null)).toThrowError();
+  expect(() => expect(grandparent).toContainElement(null)).toThrowError();
 });
 
 test('.toContainElement negative test cases', () => {

src/__tests__/to-have-prop.js

@@ -5,27 +5,25 @@ import { render } from '@testing-library/react-native';
 describe('.toHaveProp', () => {
   const { queryByTestId } = render(
     <View accessibilityLabel={null} testID="view">
-      <Text allowFontScaling={false} testID="text">
+      <Text allowFontScaling={false} testID="text" editable={false}>
         text
       </Text>
       <Button disabled testID="button" title="ok" />
     </View>,
   );
 
-  expect(queryByTestId('button')).toHaveProp('disabled', true);
-  expect(queryByTestId('button')).toHaveProp('disabled');
-  expect(queryByTestId('button')).toHaveProp('title', 'ok');
-
+  expect(queryByTestId('button')).toHaveProp('accessibilityState', { disabled: true });
+  expect(queryByTestId('text')).toHaveProp('editable', false);
   expect(queryByTestId('text')).toHaveProp('allowFontScaling', false);
-  expect(queryByTestId('text')).not.toHaveProp('style');
 
-  expect(() =>
-    expect(queryByTestId('button')).toHaveProp('accessibilityStates', ['disabled']),
-  ).toThrowError();
-  expect(() => expect(queryByTestId('button')).toHaveProp('accessible')).toThrowError();
-  expect(() => expect(queryByTestId('button')).not.toHaveProp('disabled')).toThrowError();
-  expect(() => expect(queryByTestId('button')).not.toHaveProp('title', 'ok')).toThrowError();
+  expect(queryByTestId('button')).not.toHaveProp('accessibilityStates');
+  expect(queryByTestId('button')).not.toHaveProp('editable', false);
+  expect(queryByTestId('button')).not.toHaveProp('allowFontScaling', false);
+  expect(queryByTestId('text')).not.toHaveProp('style');
 
+  // title is no longer findable as it is a React child
+  expect(() => expect(queryByTestId('button')).toHaveProp('title', 'ok')).toThrowError();
+  expect(() => expect(queryByTestId('button')).toHaveProp('disabled')).toThrowError();
   expect(() =>
     expect(queryByTestId('text')).not.toHaveProp('allowFontScaling', false),
   ).toThrowError();

src/to-contain-element.js

@@ -1,5 +1,5 @@
 import { equals } from 'ramda';
-import { matcherHint, stringify, RECEIVED_COLOR as receivedColor } from 'jest-matcher-utils';
+import { matcherHint, RECEIVED_COLOR as receivedColor } from 'jest-matcher-utils';
 
 import { checkReactElement, printElement } from './utils';
 

src/to-have-prop.js

@@ -24,6 +24,7 @@ export function toHaveProp(element, name, expectedValue) {
     pass: isDefined ? hasProp && equals(prop, expectedValue) : hasProp,
     message: () => {
       const to = this.isNot ? 'not to' : 'to';
+
       const receivedProp = hasProp ? printAttribute(name, prop) : null;
       const matcher = matcherHint(
         `${this.isNot ? '.not' : ''}.toHaveProp`,

src/to-have-style.js

@@ -1,5 +1,5 @@
 import { matcherHint } from 'jest-matcher-utils';
-import jestDiff from 'jest-diff';
+import { diff } from 'jest-diff';
 import chalk from 'chalk';
 import { all, compose, flatten, mergeAll, toPairs } from 'ramda';
 
@@ -54,7 +54,7 @@ function narrow(expected, received) {
 function expectedDiff(expected, elementStyles) {
   const received = narrow(expected, elementStyles);
 
-  const diffOutput = jestDiff(printoutStyles(expected), printoutStyles(received));
+  const diffOutput = diff(printoutStyles(expected), printoutStyles(received));
   // Remove the "+ Received" annotation because this is a one-way diff
   return diffOutput.replace(`${chalk.red('+ Received')}\n`, '');
 }

src/utils.js

@@ -40,7 +40,7 @@ class ReactElementTypeError extends Error {
     this.message = [
       matcherHint(`${context.isNot ? '.not' : ''}.${matcherFn.name}`, 'received', ''),
       '',
-      `${receivedColor('received')} value must be an React Element.`,
+      `${receivedColor('received')} value must be a React Element.`,
       withType,
     ].join('\n');
   }