chore(suite-native): introduce component tests

jest.config.native.js

@@ -7,17 +7,7 @@ const {
 } = require('./jest.config.base');
 
 const babelConfig = {
-    presets: [
-        'module:metro-react-native-babel-preset',
-        ['@babel/preset-env', { targets: { node: 'current' }, modules: 'commonjs' }],
-        '@babel/preset-typescript',
-        [
-            '@babel/preset-react',
-            {
-                runtime: 'automatic',
-            },
-        ],
-    ],
+    presets: ['babel-preset-expo'],
 };
 
 module.exports = {

suite-native/accounts/jest.config.js

@@ -0,0 +1,4 @@
+const { ...baseConfig } = require('../../jest.config.native');
+module.exports = {
+    ...baseConfig,
+};

suite-native/accounts/package.json

@@ -6,7 +6,7 @@
     "sideEffects": false,
     "main": "src/index",
     "scripts": {
-        "test:unit": "yarn g:jest -c ../../jest.config.native.js",
+        "test:unit": "yarn g:jest",
         "depcheck": "yarn g:depcheck",
         "type-check": "yarn g:tsc --build"
     },
@@ -42,5 +42,8 @@
         "react-native": "0.76.1",
         "react-native-reanimated": "3.16.1",
         "react-redux": "8.0.7"
+    },
+    "devDependencies": {
+        "@suite-native/test-utils": "workspace:*"
     }
 }

suite-native/accounts/src/components/AccountLabelFieldHint.tsx

@@ -9,7 +9,7 @@ import {
     MAX_ACCOUNT_LABEL_LENGTH,
 } from '../hooks/useAccountLabelForm';
 
-type AccountLabelFieldHintProps = {
+export type AccountLabelFieldHintProps = {
     formControl: Control<AccountFormValues>;
 };
 

suite-native/accounts/src/components/__tests__/AccountLabelFieldHint.comp.test.tsx

@@ -0,0 +1,17 @@
+import { render, renderHook } from '@suite-native/test-utils';
+
+import { AccountLabelFieldHint, AccountLabelFieldHintProps } from '../AccountLabelFieldHint';
+import { useAccountLabelForm } from '../../hooks/useAccountLabelForm';
+
+describe('AccountLabelFieldHint', () => {
+    const renderComponent = (props: AccountLabelFieldHintProps) =>
+        render(<AccountLabelFieldHint {...props} />);
+
+    test('should render', () => {
+        const { result } = renderHook(() => useAccountLabelForm('Account label'));
+
+        const { getByText } = renderComponent({ formControl: result.current.control });
+
+        expect(getByText('13 / 30 letters')).toBeDefined();
+    });
+});

suite-native/accounts/tsconfig.json

@@ -40,6 +40,7 @@
         { "path": "../toasts" },
         { "path": "../tokens" },
         { "path": "../../packages/connect" },
-        { "path": "../../packages/styles" }
+        { "path": "../../packages/styles" },
+        { "path": "../test-utils" }
     ]
 }

suite-native/atoms/jest.config.js

@@ -0,0 +1,4 @@
+const { ...baseConfig } = require('../../jest.config.native');
+module.exports = {
+    ...baseConfig,
+};

suite-native/atoms/package.json

@@ -7,7 +7,8 @@
     "main": "src/index",
     "scripts": {
         "depcheck": "yarn g:depcheck",
-        "type-check": "yarn g:tsc --build"
+        "type-check": "yarn g:tsc --build",
+        "test:unit": "yarn g:jest"
     },
     "dependencies": {
         "@gorhom/bottom-sheet": "5.0.5",
@@ -32,5 +33,8 @@
         "react-native-reanimated": "3.16.1",
         "react-native-safe-area-context": "^4.14.0",
         "react-native-svg": "15.9.0"
+    },
+    "devDependencies": {
+        "@suite-native/test-utils": "workspace:*"
     }
 }

suite-native/atoms/src/Card/__tests__/Card.comp.test.tsx

@@ -0,0 +1,29 @@
+import { Text } from 'react-native';
+
+import { render } from '@suite-native/test-utils';
+
+import { Card, CardProps } from '../Card';
+
+describe('Card', () => {
+    const renderComponent = (props: Omit<CardProps, 'children'>) => {
+        const cardProps = {
+            children: <Text>hello</Text>,
+            ...props,
+        } as CardProps;
+
+        return render(<Card {...cardProps} />);
+    };
+
+    it('should render children prop', () => {
+        const { getByText } = renderComponent({});
+
+        expect(getByText('hello')).toBeDefined();
+    });
+
+    it('should render children and alert, when alert props are specified', () => {
+        const { getByText } = renderComponent({ alertTitle: 'alert', alertVariant: 'info' });
+
+        expect(getByText('hello')).toBeDefined();
+        expect(getByText('alert')).toBeDefined();
+    });
+});

suite-native/atoms/tsconfig.json

@@ -14,6 +14,7 @@
         { "path": "../storage" },
         { "path": "../../packages/env-utils" },
         { "path": "../../packages/styles" },
-        { "path": "../../packages/theme" }
+        { "path": "../../packages/theme" },
+        { "path": "../test-utils" }
     ]
 }

suite-native/test-utils/package.json

@@ -10,10 +10,9 @@
         "type-check": "yarn g:tsc --build"
     },
     "dependencies": {
-        "@testing-library/react-native": "^12.8.1",
+        "@testing-library/react-native": "13.0.0",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
-        "react": "18.2.0",
-        "react-native-safe-area-context": "^4.14.0"
+        "react": "18.2.0"
     }
 }

suite-native/test-utils/src/Provider.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { createRenderer, StylesProvider } from '@trezor/styles';
 import { prepareNativeTheme } from '@trezor/theme';
+import { IntlProvider } from '@suite-native/intl';
 
 type ProviderProps = {
     children: ReactNode;
@@ -11,9 +11,9 @@ const renderer = createRenderer();
 const theme = prepareNativeTheme({ colorVariant: 'standard' });
 
 export const Provider = ({ children }: ProviderProps) => (
-    <SafeAreaProvider>
+    <IntlProvider>
         <StylesProvider theme={theme} renderer={renderer}>
             {children}
         </StylesProvider>
-    </SafeAreaProvider>
+    </IntlProvider>
 );

suite-native/test-utils/src/index.tsx

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+
+import { render as origRender } from '@testing-library/react-native';
+
+import { Provider } from './Provider';
+
+type Parameters<TParams> = TParams extends (...args: infer TParamsInferred) => any
+    ? TParamsInferred
+    : never;
+
+export const render = (
+    element: ReactElement,
+    { wrapper: WrapperComponent, ...options }: Parameters<typeof origRender>[1] = {},
+): ReturnType<typeof origRender> => {
+    const wrapperWithProvider = WrapperComponent
+        ? ({ children }: { children: ReactElement }) => (
+              <Provider>
+                  <WrapperComponent>{children}</WrapperComponent>
+              </Provider>
+          )
+        : Provider;
+
+    return origRender(element, {
+        wrapper: wrapperWithProvider,
+        ...options,
+    });
+};
+
+export {
+    act,
+    cleanup,
+    fireEvent,
+    renderHook,
+    screen,
+    waitFor,
+    waitForElementToBeRemoved,
+} from '@testing-library/react-native';

yarn.lock

@@ -9883,6 +9883,7 @@ __metadata:
     "@suite-native/navigation": "workspace:*"
     "@suite-native/settings": "workspace:*"
     "@suite-native/staking": "workspace:*"
+    "@suite-native/test-utils": "workspace:*"
     "@suite-native/toasts": "workspace:*"
     "@suite-native/tokens": "workspace:*"
     "@trezor/connect": "workspace:*"
@@ -10097,6 +10098,7 @@ __metadata:
     "@suite-native/icons": "workspace:*"
     "@suite-native/intl": "workspace:^"
     "@suite-native/storage": "workspace:*"
+    "@suite-native/test-utils": "workspace:*"
     "@trezor/env-utils": "workspace:*"
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
@@ -11145,15 +11147,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@suite-native/test-utils@workspace:suite-native/test-utils":
+"@suite-native/test-utils@workspace:*, @suite-native/test-utils@workspace:suite-native/test-utils":
   version: 0.0.0-use.local
   resolution: "@suite-native/test-utils@workspace:suite-native/test-utils"
   dependencies:
-    "@testing-library/react-native": "npm:^12.8.1"
+    "@testing-library/react-native": "npm:13.0.0"
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
     react: "npm:18.2.0"
-    react-native-safe-area-context: "npm:^4.14.0"
   languageName: unknown
   linkType: soft
 
@@ -11472,22 +11473,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react-native@npm:^12.8.1":
-  version: 12.8.1
-  resolution: "@testing-library/react-native@npm:12.8.1"
+"@testing-library/react-native@npm:13.0.0":
+  version: 13.0.0
+  resolution: "@testing-library/react-native@npm:13.0.0"
   dependencies:
     jest-matcher-utils: "npm:^29.7.0"
     pretty-format: "npm:^29.7.0"
     redent: "npm:^3.0.0"
   peerDependencies:
-    jest: ">=28.0.0"
-    react: ">=16.8.0"
-    react-native: ">=0.59"
-    react-test-renderer: ">=16.8.0"
+    jest: ">=29.0.0"
+    react: ">=18.2.0"
+    react-native: ">=0.71"
+    react-test-renderer: ">=18.2.0"
   peerDependenciesMeta:
     jest:
       optional: true
-  checksum: 10/eaa09cb560a469c686b8eb0ee8085bb54654a481e6bcf9eb5bc7b756c5303ca6b5c17ab2ef1479b8c245ac153ac69907d47c30ec9b496a29a6e459baa3d3f5d9
+  checksum: 10/cc94539083dc6ee133a8d62a65c97871268177bff3f0e14305c633e4a052c051a4a4ce3538bd20df8cc2e240faebb44cc210197de4c1da5d61082bac590f5592
   languageName: node
   linkType: hard