chore: upgrade react native testing library to v7

Author: acostalima

__mocks__/SvgMock.js __mocks__/MockSvg.js__mocks__/SvgMock.js renamed to __mocks__/MockSvg.js

@@ -221,19 +221,19 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
-  - RNBootSplash (2.1.0):
+  - RNBootSplash (2.2.8):
+    - React-Core
+  - RNCMaskedView (0.1.11):
     - React
-  - RNCMaskedView (0.1.7):
-    - React
-  - RNGestureHandler (1.6.1):
-    - React
-  - RNLocalize (1.4.0):
-    - React
-  - RNReanimated (1.7.1):
-    - React
-  - RNScreens (2.4.0):
-    - React
-  - RNSVG (12.0.3):
+  - RNGestureHandler (1.10.3):
+    - React-Core
+  - RNLocalize (1.4.3):
+    - React-Core
+  - RNReanimated (1.13.3):
+    - React-Core
+  - RNScreens (2.18.1):
+    - React-Core
+  - RNSVG (12.1.1):
     - React
   - Yoga (1.14.0)
 
@@ -378,15 +378,15 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  RNBootSplash: fbf76a4bf1c03e9acd1dd08ce064847f26d6d8bf
-  RNCMaskedView: 76c40a1d41c3e2535df09246a2b5487f04de0814
-  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
-  RNLocalize: b6df30cc25ae736d37874f9bce13351db2f56796
-  RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
-  RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363
-  RNSVG: 7e16ddfc6e00d5aa69c9eb83e699bcce5dcb85d4
+  RNBootSplash: 14d30c2e1de7247d334540cb2c2d7f3c2acc6150
+  RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
+  RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNLocalize: 7c7aeda16c01db7a0918981c14875c0a53be9b79
+  RNReanimated: 514a11da3a2bcc6c3dfd9de32b38e2b9bf101926
+  RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
 PODFILE CHECKSUM: 6d232769a3df22ec242f559aad72d785e04186ad
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.0

ios/Podfile.lock

@@ -14,7 +14,7 @@ module.exports = compose(
         ...config,
         moduleNameMapper: {
             ...config.moduleNameMapper,
-            '\\.svg': '<rootDir>/__mocks__/SvgMock.js',
+            '\\.svg': '<rootDir>/__mocks__/MockSvg.js',
         },
         coveragePathIgnorePatterns: [
             ...config.coveragePathIgnorePatterns,

jest.config.js

@@ -46,7 +46,7 @@
     "@react-navigation/native": "^5.0.9",
     "@react-navigation/stack": "^5.1.1",
     "hoist-non-react-statics": "^3.3.2",
-    "react": "^16.9.0",
+    "react": "16.9.0",
     "react-intl": "^4.5.0",
     "react-native": "0.61.5",
     "react-native-bootsplash": "^2.1.0",
@@ -67,23 +67,22 @@
     "@moxy/eslint-config-react": "^12.3.0",
     "@moxy/eslint-config-react-native": "^12.3.1",
     "@moxy/eslint-config-react-native-a11y": "^12.3.1",
-    "@moxy/jest-config-base": "^5.0.0",
-    "@moxy/jest-config-react-native": "^5.0.0",
-    "@moxy/jest-config-testing-library": "^5.1.0",
-    "@testing-library/react-native": "^5.0.3",
+    "@moxy/jest-config-base": "^6.0.0",
+    "@moxy/jest-config-react-native": "^6.0.0",
+    "@moxy/jest-config-testing-library": "^6.0.0",
+    "@testing-library/react-native": "^7.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "commitlint": "^8.0.0",
     "eslint": "^6.8.0",
     "full-icu": "^1.3.1",
     "husky": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.1.0",
+    "jest": "^26.0.0",
     "lint-staged": "^10.0.2",
     "metro-react-native-babel-preset": "^0.59.0",
     "patch-package": "^6.2.2",
-    "react-dom": "^16.13.1",
     "react-native-svg-transformer": "^0.14.3",
-    "react-test-renderer": "^16.9.0",
+    "react-test-renderer": "16.9.0",
     "rimraf": "^3.0.2",
     "source-map-cli": "^1.0.0",
     "standard-version": "^7.1.0"

package-lock.json

@@ -3,5 +3,6 @@ import * as React from 'react';
 export const navigationRef = React.createRef();
 
 export function navigate(name, params) {
-  navigationRef.current?.navigate(name, params);
+    /* eslint-disable-next-line babel/no-unused-expressions */
+    navigationRef.current?.navigate(name, params);
 }

package.json

@@ -1,32 +1,33 @@
 import React from 'react';
+import { TouchableHighlight, TouchableOpacity } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 import Button from './Button';
 
 it('should render a TouchableHighlight when no type is supplied', () => {
-    const { getByLabelText } = render(
+    const { UNSAFE_getByType: getByType } = render(
         <Button
             accessibilityLabel="button"
             title="button"
             onPress={ () => null } />,
     );
 
-    const pressable = getByLabelText('button');
+    const touchableHighlight = getByType(TouchableHighlight);
 
-    expect(pressable.type).toBe('TouchableHighlight');
+    expect(touchableHighlight).toBeDefined();
 });
 
 it('should render a TouchableOpacity when type is opacity', () => {
-    const { getByLabelText } = render(
+    const { UNSAFE_getByType: getByType } = render(
         <Button
             accessibilityLabel="button"
             title="button"
             onPress={ () => null }
             type="opacity" />,
     );
 
-    const pressable = getByLabelText('button');
+    const touchableOpacity = getByType(TouchableOpacity);
 
-    expect(pressable.type).toBe('TouchableOpacity');
+    expect(touchableOpacity).toBeDefined();
 });
 
 it('should render title', () => {

src/navigation/root/index.js

@@ -32,6 +32,7 @@ const ReactNativeLocaleProvider = ({
     locales,
     initialLocaleId,
     onLocaleChange,
+    textComponent,
 }) => {
     const intlCache = useRef(createIntlCache());
     const [currentLocale, setCurrentLocale] = useState(getInitialLocale(locales, locales[0], initialLocaleId));
@@ -46,6 +47,7 @@ const ReactNativeLocaleProvider = ({
         setCurrentLocale(nextLocale);
 
         if (localeId !== currentLocale.id) {
+            /* eslint-disable-next-line babel/no-unused-expressions */
             onLocaleChange?.(nextLocale.id);
         }
     }, [setCurrentLocale, locales, onLocaleChange, currentLocale]);
@@ -54,6 +56,7 @@ const ReactNativeLocaleProvider = ({
         const intl = createIntl({
             locale: currentLocale.id,
             messages: currentLocale.messages,
+            textComponent,
         }, intlCache);
 
         return {
@@ -63,7 +66,7 @@ const ReactNativeLocaleProvider = ({
             id: currentLocale.id,
             changeLocale: handleLocaleChange,
         };
-    }, [handleLocaleChange, currentLocale, locales]);
+    }, [handleLocaleChange, currentLocale, locales, textComponent]);
 
     useEffect(() => {
         const locale = findLocaleById(locales, currentLocale.id);
@@ -83,14 +86,15 @@ const ReactNativeLocaleProvider = ({
 };
 
 ReactNativeLocaleProvider.propTypes = {
-    children: PropTypes.element,
+    children: PropTypes.element.isRequired,
     initialLocaleId: PropTypes.string,
     locales: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired,
         messages: PropTypes.object.isRequired,
     })).isRequired,
     onLocaleChange: PropTypes.func,
+    textComponent: PropTypes.elementType,
 };
 
 export default ReactNativeLocaleProvider;

src/shared/modules/react-native-button/Button.test.js

@@ -8,7 +8,7 @@ import useLocale from './use-locale';
 
 const messages = {
     'en-US': { apple: 'apple' }, // Default locale
-    'pt-PT': { apple: 'maça' },
+    'pt-PT': { apple: 'maçã' },
     'ru-RU': { apple: 'яблоко' },
 };
 
@@ -20,6 +20,7 @@ const locales = [
 
 beforeEach(() => {
     jest.clearAllMocks();
+    /* eslint-disable-next-line babel/no-unused-expressions */
     console.error.mockRestore?.();
 });
 
@@ -30,7 +31,7 @@ it("should load matching user's device preferred locale", () => {
     }));
 
     const { queryByText } = render(
-        <LocaleProvider locales={ locales }>
+        <LocaleProvider locales={ locales } textComponent={ Text }>
             <Text>
                 <FormattedMessage id="apple" />
             </Text>
@@ -47,7 +48,7 @@ it("should load default locale if there is no matching user's device preferred l
     }));
 
     const { queryByText } = render(
-        <LocaleProvider locales={ locales }>
+        <LocaleProvider locales={ locales } textComponent={ Text }>
             <Text>
                 <FormattedMessage id="apple" />
             </Text>
@@ -59,7 +60,7 @@ it("should load default locale if there is no matching user's device preferred l
 
 it('should load initial locale by id if it exists', () => {
     const { queryByText } = render(
-        <LocaleProvider locales={ locales } initialLocaleId="pt-PT">
+        <LocaleProvider locales={ locales } initialLocaleId="pt-PT" textComponent={ Text }>
             <Text>
                 <FormattedMessage id="apple" />
             </Text>
@@ -74,7 +75,7 @@ it('should throw if initial locale id does not exist', () => {
 
     expect(() =>
         render(
-            <LocaleProvider locales={ locales } initialLocaleId="es-ES">
+            <LocaleProvider locales={ locales } initialLocaleId="es-ES" textComponent={ Text }>
                 <Text>
                     <FormattedMessage id="apple" />
                 </Text>
@@ -88,7 +89,7 @@ it('should throw if locales array is empty', () => {
 
     expect(() =>
         render(
-            <LocaleProvider locales={ [] }>
+            <LocaleProvider locales={ [] } textComponent={ Text }>
                 <Text>
                     <FormattedMessage id="apple" />
                 </Text>
@@ -115,7 +116,7 @@ it('should change locale when requested by a consumer', () => {
     };
 
     const { getByTestId, getByText } = render(
-        <LocaleProvider locales={ locales } initialLocaleId="en-US">
+        <LocaleProvider locales={ locales } initialLocaleId="en-US" textComponent={ Text }>
             <MyComponent />
         </LocaleProvider>,
     );
@@ -145,7 +146,7 @@ it('should not change locale when a consumer requests an unknown locale', () =>
     };
 
     const { getByTestId, getByText } = render(
-        <LocaleProvider locales={ locales } initialLocaleId="en-US">
+        <LocaleProvider locales={ locales } initialLocaleId="en-US" textComponent={ Text }>
             <MyComponent />
         </LocaleProvider>,
     );
@@ -172,7 +173,8 @@ it('should callback when locale changes', () => {
         <LocaleProvider
             locales={ locales }
             initialLocaleId="en-US"
-            onLocaleChange={ onLocalChange }>
+            onLocaleChange={ onLocalChange }
+            textComponent={ Text }>
             <MyComponent />
         </LocaleProvider>,
     );
@@ -186,7 +188,7 @@ it('should callback when locale changes', () => {
 it('should fail if locales change but current locale does not exist', () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    const { rerender } = render(<LocaleProvider locales={ locales } />);
+    const { rerender } = render(<LocaleProvider locales={ locales } textComponent={ Text } />);
 
     expect(() => {
         rerender(<LocaleProvider locales={ locales.slice(1) } />);

src/shared/modules/react-native-locale/LocaleProvider.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from 'react-native';
 import PropTypes from 'prop-types';
 import { render } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -18,6 +19,23 @@ const localeConfig = {
             messages: idObj,
         },
     ],
+    // Consider the following React code:
+    //
+    // <Text>
+    //    <FormattedMessage id="foo" />
+    // </Text>
+    //
+    // In this case, the "foo" key will resolve into the text "bar", and the following will be rendered:
+    //
+    // <Text>
+    //    <Text>
+    //       bar
+    //    </Text>
+    // </Text>
+    //
+    // This a is necessary workaround because *ByText queries can only look up a string if it's
+    // a direct child of a Text component.
+    textComponent: Text,
 };
 
 const Providers = ({ children }) => (
@@ -38,7 +56,7 @@ Providers.propTypes = {
 
 const customRender = (ui, options) => render(ui, { wrapper: Providers, ...options });
 
-// re-export everything
+// Export everything from NTL
 export * from '@testing-library/react-native';
 
 // Override render method