feat(suite-native): introduce component tests with redux

Author: jbazant

jest.config.native.js

@@ -24,12 +24,15 @@ module.exports = {
         '\\.(js|jsx|ts|tsx)$': ['babel-jest', babelConfig],
     },
     transformIgnorePatterns: [
-        'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)',
+        'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|@shopify/react-native-skia)',
     ],
     setupFiles: [
         '<rootDir>/../../node_modules/@shopify/react-native-skia/jestSetup.js',
         '<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js',
         '<rootDir>/../../suite-native/test-utils/src/atomsMock.js',
         '<rootDir>/../../suite-native/test-utils/src/expoMock.js',
+        '<rootDir>/../../suite-native/firmware/src/jestSetup.js',
+        '<rootDir>/../../suite-native/connection-status/src/jestSetup.js',
+        '<rootDir>/../../suite-native/react-native-graph/src/jestSetup.js',
     ],
 };

suite-native/app/src/navigation/__tests__/AppTabNavigator.comp.test.tsx

@@ -0,0 +1,14 @@
+import { renderWithStore, waitFor } from '@suite-native/test-utils';
+
+import { AppTabNavigator } from '../AppTabNavigator';
+
+describe('AppTabNavigator', () => {
+    it('should render 3 buttons', async () => {
+        const { getByText } = renderWithStore(<AppTabNavigator />);
+        await waitFor(() => expect(getByText('Home')).toBeDefined());
+
+        expect(getByText('Home')).toBeDefined();
+        expect(getByText('My assets')).toBeDefined();
+        expect(getByText('Settings')).toBeDefined();
+    });
+});

suite-native/connection-status/src/jestSetup.js

@@ -0,0 +1,3 @@
+import mockRNCNetInfo from '@react-native-community/netinfo/jest/netinfo-mock.js';
+
+jest.mock('@react-native-community/netinfo', () => mockRNCNetInfo);

suite-native/firmware/src/jestSetup.js

@@ -0,0 +1,6 @@
+jest.mock('@suite-native/firmware', () => ({
+    ...jest.requireActual('./nativeFirmwareSlice'),
+    ...jest.requireActual('./hooks/useIsFirmwareUpdateFeatureEnabled'),
+    UpdateProgressIndicatorDemo: () => null,
+    FirmwareUpdateInProgressScreen: () => null,
+}));

suite-native/react-native-graph/src/jestSetup.js

@@ -0,0 +1 @@
+jest.mock('@suite-native/react-native-graph', () => ({}));

suite-native/state/src/store.ts

@@ -12,6 +12,9 @@ import { blockchainMiddleware } from '@suite-native/blockchain';
 import { extraDependencies } from './extraDependencies';
 import { prepareRootReducers } from './reducers';
 
+type RootReducerShape = Awaited<ReturnType<typeof prepareRootReducers>>;
+export type PreloadedState = Partial<RootReducerShape> | undefined;
+
 const ENABLE_REDUX_LOGGER = false;
 
 const middlewares: Middleware[] = [
@@ -33,7 +36,7 @@ if (__DEV__) {
     }
 }
 
-export const initStore = async () =>
+export const initStore = async (preloadedState?: PreloadedState) =>
     configureStore({
         reducer: await prepareRootReducers(),
         middleware: getDefaultMiddleware =>
@@ -45,4 +48,5 @@ export const initStore = async () =>
                 immutableCheck: false,
             }).concat(middlewares),
         enhancers: defaultEnhancers => defaultEnhancers.concat(enhancers),
+        preloadedState,
     });

suite-native/test-utils/package.json

@@ -10,9 +10,12 @@
         "type-check": "yarn g:tsc --build"
     },
     "dependencies": {
+        "@react-navigation/native": "6.1.18",
+        "@reduxjs/toolkit": "1.9.5",
         "@testing-library/react-native": "13.0.0",
         "@trezor/styles": "workspace:*",
         "@trezor/theme": "workspace:*",
-        "react": "18.2.0"
+        "react": "18.2.0",
+        "react-redux": "8.0.7"
     }
 }

suite-native/test-utils/redux.d.ts

@@ -0,0 +1,11 @@
+import { AsyncThunkAction } from '@reduxjs/toolkit';
+
+declare module 'redux' {
+    export interface Dispatch<A extends Action = AnyAction> {
+        <TThunk extends AsyncThunkAction<any, any, any>>(thunk: TThunk): ReturnType<TThunk>;
+
+        <ReturnType = any, State = any, ExtraThunkArg = any>(
+            thunkAction: ThunkAction<ReturnType, State, ExtraThunkArg, A>,
+        ): ReturnType;
+    }
+}

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

@@ -1,19 +1,22 @@
 import { ReactNode } from 'react';
 
+import { NavigationContainer } from '@react-navigation/native';
+
 import { createRenderer, StylesProvider } from '@trezor/styles';
 import { prepareNativeTheme } from '@trezor/theme';
 import { IntlProvider } from '@suite-native/intl';
 
 type ProviderProps = {
     children: ReactNode;
 };
+
 const renderer = createRenderer();
 const theme = prepareNativeTheme({ colorVariant: 'standard' });
 
-export const Provider = ({ children }: ProviderProps) => (
+export const BasicProvider = ({ children }: ProviderProps) => (
     <IntlProvider>
         <StylesProvider theme={theme} renderer={renderer}>
-            {children}
+            <NavigationContainer>{children}</NavigationContainer>
         </StylesProvider>
     </IntlProvider>
 );

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

@@ -0,0 +1,38 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { Provider } from 'react-redux';
+
+import { EnhancedStore } from '@reduxjs/toolkit';
+
+import { initStore, PreloadedState } from '@suite-native/state';
+
+import { BasicProvider } from './BasicProvider';
+
+type ReduxProviderProps = {
+    children: ReactNode;
+    preloadedState: PreloadedState;
+};
+
+/*
+This is file is a copy of `StoreProvider.tsx` from `suite-native/state` but with ability to pass `preloadedState` as a prop
+and without the `Persistor` and  `Sentry` logic.
+ */
+export const StoreProviderForTests = ({ children, preloadedState }: ReduxProviderProps) => {
+    const [store, setStore] = useState<EnhancedStore | null>(null);
+
+    useEffect(() => {
+        const initStoreAsync = async () => {
+            const freshStore = await initStore(preloadedState);
+            setStore(freshStore);
+        };
+
+        initStoreAsync();
+    }, [preloadedState]);
+
+    if (store === null) return null;
+
+    return (
+        <Provider store={store}>
+            <BasicProvider>{children}</BasicProvider>
+        </Provider>
+    );
+};

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

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+
+import { render, RenderOptions } from '@testing-library/react-native';
+
+import { PreloadedState } from '@suite-native/state';
+
+type ProviderProps = {
+    preloadedState?: PreloadedState;
+} & RenderOptions;
+
+export const createRender =
+    (Provider: NonNullable<RenderOptions['wrapper']>) =>
+    <T,>(
+        element: ReactElement<T>,
+        { wrapper: WrapperComponent, preloadedState, ...options }: ProviderProps = {},
+    ) => {
+        const wrapperWithProvider = ({ children }: { children: ReactElement }) => (
+            <Provider preloadedState={preloadedState}>
+                {WrapperComponent ? <WrapperComponent>{children}</WrapperComponent> : children}
+            </Provider>
+        );
+
+        return render(element, {
+            wrapper: wrapperWithProvider,
+            ...options,
+        });
+    };

suite-native/test-utils/src/expoMock.js

@@ -401,3 +401,5 @@ jest.mock('expo-constants', () => {
 
     return Constants;
 });
+
+jest.mock('redux-devtools-expo-dev-plugin', () => () => next => next);

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

@@ -1,30 +1,8 @@
-import { ReactElement } from 'react';
+import { createRender } from './createRender';
+import { BasicProvider } from './BasicProvider';
+import { StoreProviderForTests } from './StoreProviderForTests';
 
-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 type { PreloadedState } from '@suite-native/state';
 
 export {
     act,
@@ -35,3 +13,7 @@ export {
     waitFor,
     waitForElementToBeRemoved,
 } from '@testing-library/react-native';
+
+export const render = createRender(BasicProvider);
+
+export const renderWithStore = createRender(StoreProviderForTests);

yarn.lock

@@ -10950,6 +10950,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@suite-native/module-trading@workspace:suite-native/module-trading":
+  version: 0.0.0-use.local
+  resolution: "@suite-native/module-trading@workspace:suite-native/module-trading"
+  dependencies:
+    "@react-navigation/native-stack": "npm:6.11.0"
+    "@reduxjs/toolkit": "npm:1.9.5"
+    "@suite-native/navigation": "workspace:*"
+    "@trezor/styles": "workspace:*"
+    react: "npm:18.2.0"
+    react-native: "npm:0.76.1"
+    react-native-reanimated: "npm:^3.16.7"
+  languageName: unknown
+  linkType: soft
+
 "@suite-native/navigation@workspace:*, @suite-native/navigation@workspace:suite-native/navigation":
   version: 0.0.0-use.local
   resolution: "@suite-native/navigation@workspace:suite-native/navigation"
@@ -11175,10 +11189,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@suite-native/test-utils@workspace:suite-native/test-utils"
   dependencies:
+    "@react-navigation/native": "npm:6.1.18"
+    "@reduxjs/toolkit": "npm:1.9.5"
     "@testing-library/react-native": "npm:13.0.0"
     "@trezor/styles": "workspace:*"
     "@trezor/theme": "workspace:*"
     react: "npm:18.2.0"
+    react-redux: "npm:8.0.7"
   languageName: unknown
   linkType: soft