Merge pull request #834 from GetStream/fix-tests-dev

test(unit): Fix old unit tests

Author: vishalnarkhede

.github/workflows/check-pr.yml

@@ -1,4 +1,4 @@
-name: Check PR
+name: Lint & Unit Tests
 
 on:
   pull_request:
@@ -22,3 +22,5 @@ jobs:
         run: yarn --frozen-lockfile && yarn bootstrap-ci
       - name: Lint
         run: yarn lint
+      - name: Test
+        run: yarn test:unit

examples/SampleApp/package.json

@@ -18,7 +18,8 @@
     "bootstrap": "yarn install",
     "bootstrap-ci": "yarn install --frozen-lockfile",
     "release": "FILTER_PATH='examples/SampleApp' TAG_FORMAT=$npm_package_name'@v${version}' node ../../release/prod",
-    "release-next": "echo \"Skipping next release for SampleApp\""
+    "release-next": "echo \"Skipping next release for SampleApp\"",
+    "test:unit": "echo \"Skipping unit tests for SampleApp\""
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "1.15.6",

package.json

@@ -31,6 +31,7 @@
     "bootstrap": "yarn lerna-workspaces run bootstrap",
     "bootstrap-ci": "yarn lerna-workspaces run bootstrap-ci",
     "lint": "yarn lerna-workspaces run lint",
+    "test:unit": "yarn lerna-workspaces run test:unit",
     "build": "yarn lerna-workspaces run build"
   }
 }

package/__mocks__/react-native.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import * as ReactNative from 'react-native';
+
+export * from 'react-native';
+
+export const Image = ReactNative.Image;
+
+Image.prefetch = () => Promise.resolve();
+
+export const FlatList = function MockedFlatList(props) {
+  if (!props.data.length && props.ListEmptyComponent)
+    return <ReactNative.View testID={props.testID}>{props.ListEmptyComponent}</ReactNative.View>;
+
+  const items = props.data.map((item, index) => {
+    const key = props.keyExtractor(item, index);
+    return <ReactNative.View key={key}>{props.renderItem({ index, item })}</ReactNative.View>;
+  });
+  return <ReactNative.View testID={props.testID}>{items}</ReactNative.View>;
+};
+
+export default Object.setPrototypeOf(
+  {
+    FlatList,
+    Image,
+  },
+  ReactNative,
+);

package/babel.config.js

@@ -26,6 +26,7 @@ module.exports = (api) => {
           },
         ],
         'module-resolver',
+        'react-native-reanimated/plugin',
       ],
       presets: ['@babel/env', 'module:metro-react-native-babel-preset', '@babel/preset-typescript'],
     };

package/jest-setup.js

@@ -36,4 +36,15 @@ registerNativeHandlers({
   triggerHaptic: () => null,
 });
 
-jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
+require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();
+
+jest.mock('@gorhom/bottom-sheet', () => {
+  const react = require('react-native');
+  return {
+    __esModule: true,
+    default: react.View,
+    BottomSheetScrollView: react.ScrollView,
+    BottomSheetFlatList: react.FlatList,
+  };
+});
+// jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

package/jest.config.js

@@ -1,5 +1,7 @@
 // eslint-disable-next-line no-undef
 module.exports = {
+  testEnvironment: 'jsdom',
+
   moduleNameMapper: {
     'mock-builders(.*)$': '<rootDir>/src/mock-builders$1',
   },
@@ -11,6 +13,7 @@ module.exports = {
   ],
   setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
   testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__'],
+  transformIgnorePatterns: ['node_modules/!(react-native-reanimated)'],
   testRegex: [
     /**
      * If you want to test single file, mention it here

package/package.json

@@ -36,7 +36,7 @@
     "prepare-distribution": "cd examples/SampleApp && npm version patch && react-native-version && git add ./ && git commit -m 'Bump build version' --no-verify",
     "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
     "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
-    "test": "TZ=UTC jest",
+    "test:unit": "TZ=UTC jest",
     "validate-translations": "node bin/validate-translations.js",
     "get-version": "echo $npm_package_version",
     "version": "bash ./bin/before-tag.sh",

package/src/components/Attachment/Gallery.tsx

@@ -61,6 +61,7 @@ const GalleryImage: React.FC<
             : uri.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(Number(height))}`)
           : uri,
       }}
+      testID='image-attachment-single'
     />
   );
 };

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -50,7 +50,7 @@ describe('Attachment', () => {
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('card-attachment')).toBeTruthy();
+      expect(getByTestId('giphy-attachment')).toBeTruthy();
     });
   });
 
@@ -59,7 +59,7 @@ describe('Attachment', () => {
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('card-attachment')).toBeTruthy();
+      expect(getByTestId('giphy-attachment')).toBeTruthy();
     });
   });
 
@@ -80,7 +80,7 @@ describe('Attachment', () => {
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
     await waitFor(() => {
-      expect(getByTestId('image-attachment-single')).toBeTruthy();
+      expect(getByTestId('image-multiple')).toBeTruthy();
     });
   });
 
@@ -97,12 +97,12 @@ describe('Attachment', () => {
   });
 
   it('should call actionHandler on click', async () => {
-    const actionHandler = jest.fn();
+    const handleAction = jest.fn();
     const action = generateAttachmentAction();
     const { getByTestId } = render(
       getActionComponent({
-        actionHandler,
         actions: [action],
+        handleAction,
       }),
     );
 
@@ -116,7 +116,7 @@ describe('Attachment', () => {
     fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
 
     await waitFor(() => {
-      expect(actionHandler).toHaveBeenCalledTimes(2);
+      expect(handleAction).toHaveBeenCalledTimes(2);
     });
   });