Merge pull request #269 from GetStream/testing-lib-upgrade

React Testing Library upgrade

Author: vishalnarkhede

.eslintrc.json

@@ -26,6 +26,7 @@
     "no-var": 2,
     "linebreak-style": [2, "unix"],
     "semi": [1, "always"],
+    "jest/expect-expect": 0,
     "jsx-quotes": ["error", "prefer-single"]
   },
   "env": {

jest-setup.js

@@ -1,5 +1,19 @@
 import { registerNativeHandlers } from './src/native';
 
+// eslint-disable-next-line no-underscore-dangle
+const _consoleE = console.error;
+console.error = (e) => {
+  // For some reason following error gets rased from waitFor function.
+  // Source of the error is in react-test-renderer, although cause of the
+  // issue is unknown. Until we figure out the proper way to fix this issue,
+  // following hack should work. We just suppress this particular error.
+  // It should be safe since the error is only raised in dev environment
+  // https://github.com/facebook/react/blob/b683c07ccce340b9d687683d5dd7347a4c866787/packages/react-dom/src/test-utils/ReactTestUtilsAct.js#L121
+  if (e.indexOf('You called act(async () => ...) without await') === -1) {
+    _consoleE(e);
+  }
+};
+
 registerNativeHandlers({
   NetInfo: {
     addEventListener: () => {},

jest.config.js

@@ -1,6 +1,6 @@
-const jestPreset = require('@testing-library/react-native/jest-preset');
-
-module.exports = Object.assign(jestPreset, {
+// eslint-disable-next-line no-undef
+module.exports = {
+  verbose: true,
   testRegex: [
     /**
      * If you want to test single file, mention it here
@@ -9,11 +9,13 @@ module.exports = Object.assign(jestPreset, {
      * "src/components/MessageList/__tests__/MessageList.test.js"
      */
   ],
-  testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__'],
   moduleNameMapper: {
     'mock-builders(.*)$': '<rootDir>/src/mock-builders$1',
     '@stream-io/styled-components':
       '<rootDir>/node_modules/@stream-io/styled-components/native/dist/styled-components.native.cjs.js',
   },
-  setupFiles: [...jestPreset.setupFiles, require.resolve('./jest-setup.js')],
-});
+  preset: 'react-native',
+  setupFiles: [require.resolve('./jest-setup.js')],
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  testPathIgnorePatterns: ['/node_modules/', '/examples/', '__snapshots__'],
+};

package.json

@@ -104,7 +104,7 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.0.0",
     "@testing-library/jest-native": "^3.3.0",
-    "@testing-library/react-native": "^5.0.3",
+    "@testing-library/react-native": "^7.0.1",
     "@types/react": "^16.8.23",
     "@types/react-native": "^0.57.0",
     "ast-pretty-print": "^2.0.1",
@@ -116,11 +116,11 @@
     "babel-preset-expo": "^5.0.0",
     "eslint": "^5.16.0",
     "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-jest": "^22.5.1",
+    "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-react": "^7.12.4",
     "husky": "^2.1.0",
-    "jest": "^25.1.0",
+    "jest": "^26.2.2",
     "prettier": "^1.16.4",
     "react": "^16.5.0",
     "react-dom": "^16.8.6",

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

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  fireEvent,
-  render,
-  wait,
-  waitForElement,
-} from '@testing-library/react-native';
-import '@testing-library/jest-native/extend-expect';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -29,7 +23,7 @@ describe('Attachment', () => {
     const attachment = generateAudioAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('file-attachment')).toBeTruthy();
     });
   });
@@ -38,7 +32,7 @@ describe('Attachment', () => {
     const attachment = generateFileAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('file-attachment')).toBeTruthy();
     });
   });
@@ -47,7 +41,7 @@ describe('Attachment', () => {
     const attachment = generateImgurAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });
@@ -56,7 +50,7 @@ describe('Attachment', () => {
     const attachment = generateGiphyAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });
@@ -65,7 +59,7 @@ describe('Attachment', () => {
     const attachment = generateImageAttachment();
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });
@@ -77,7 +71,7 @@ describe('Attachment', () => {
     });
     const { getByTestId } = render(getAttachmentComponent({ attachment }));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('image-attachment-single')).toBeTruthy();
     });
   });
@@ -91,7 +85,7 @@ describe('Attachment', () => {
       getAttachmentComponent({ attachment, actionHandler: () => {} }),
     );
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('attachment-actions')).toBeTruthy();
     });
   });
@@ -106,7 +100,7 @@ describe('Attachment', () => {
       }),
     );
 
-    await waitForElement(() =>
+    await waitFor(() =>
       getByTestId(`attachment-actions-button-${action.name}`),
     );
 
@@ -117,7 +111,7 @@ describe('Attachment', () => {
     fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
     fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
 
-    await wait(() => {
+    await waitFor(() => {
       expect(actionHandler).toHaveBeenCalledTimes(2);
     });
   });
@@ -128,7 +122,7 @@ describe('Attachment', () => {
         attachment: generateCardAttachment({ type: uuidv4() }),
       }),
     );
-    await wait(() => {
+    await waitFor(() => {
       expect(getByTestId('card-attachment')).toBeTruthy();
     });
   });

src/components/Avatar/__tests__/Avatar.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getNodeText, render, wait } from '@testing-library/react-native';
+import { render, waitFor } from '@testing-library/react-native';
 
 import Avatar from '../Avatar';
 
@@ -9,7 +9,7 @@ describe('Avatar', () => {
       <Avatar image='https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg' />,
     );
 
-    await wait(() => {
+    await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
       expect(queryByTestId('avatar-text')).toBeFalsy();
     });
@@ -23,7 +23,7 @@ describe('Avatar', () => {
       />,
     );
 
-    await wait(() => {
+    await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
       expect(queryByTestId('avatar-text')).toBeFalsy();
     });
@@ -37,7 +37,7 @@ describe('Avatar', () => {
       />,
     );
 
-    await wait(() => {
+    await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeTruthy();
       expect(queryByTestId('avatar-text')).toBeFalsy();
     });
@@ -46,10 +46,10 @@ describe('Avatar', () => {
   it('should render an avatar with no image but a name and default size', async () => {
     const { getByTestId, queryByTestId } = render(<Avatar name='Test User' />);
 
-    await wait(() => {
+    await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeFalsy();
       expect(queryByTestId('avatar-text')).toBeTruthy();
-      expect(getNodeText(getByTestId('avatar-text'))).toBe('TU');
+      expect(getByTestId('avatar-text')).toHaveTextContent('TU');
     });
   });
 
@@ -58,10 +58,10 @@ describe('Avatar', () => {
       <Avatar name='Test User' size={20} />,
     );
 
-    await wait(() => {
+    await waitFor(() => {
       expect(queryByTestId('avatar-image')).toBeFalsy();
       expect(queryByTestId('avatar-text')).toBeTruthy();
-      expect(getNodeText(getByTestId('avatar-text'))).toBe('TU');
+      expect(getByTestId('avatar-text')).toHaveTextContent('TU');
     });
   });
 });

src/components/ChannelPreview/__tests__/ChannelPreview.test.js

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  act,
-  getNodeText,
-  render,
-  wait,
-  waitForElement,
-} from '@testing-library/react-native';
+import { act, render, waitFor } from '@testing-library/react-native';
 
 import {
   dispatchMessageDeletedEvent,
@@ -77,7 +71,7 @@ describe('ChannelPreview', () => {
     });
     await initializeChannel(c);
     const { queryByText } = render(getComponent());
-    await waitForElement(() => queryByText(message.text));
+    await waitFor(() => queryByText(message.text));
   });
 
   it('should mark channel as read, when message.read event is received for current user', async () => {
@@ -87,14 +81,16 @@ describe('ChannelPreview', () => {
 
     const { getByTestId } = render(getComponent());
 
-    await waitForElement(() => getByTestId('channel-id'));
-    expect(getNodeText(getByTestId('unread-count'))).toBe('20');
+    await waitFor(() => getByTestId('channel-id'));
+
+    expect(getByTestId('unread-count')).toHaveTextContent('20');
+
     act(() => {
       dispatchMessageReadEvent(chatClient, clientUser, channel);
     });
 
-    await wait(() => {
-      expect(getNodeText(getByTestId('unread-count'))).toBe('0');
+    await waitFor(() => {
+      expect(getByTestId('unread-count')).toHaveTextContent('0');
     });
   });
 
@@ -112,7 +108,7 @@ describe('ChannelPreview', () => {
 
       const { getByTestId } = render(getComponent());
 
-      await waitForElement(() => getByTestId('channel-id'));
+      await waitFor(() => getByTestId('channel-id'));
 
       const message = generateMessage({
         user: clientUser,
@@ -122,8 +118,8 @@ describe('ChannelPreview', () => {
         dispatcher(chatClient, message, channel);
       });
 
-      await wait(() => {
-        expect(getNodeText(getByTestId('last-event-message'))).toBe(
+      await waitFor(() => {
+        expect(getByTestId('last-event-message')).toHaveTextContent(
           message.text,
         );
       });
@@ -136,7 +132,7 @@ describe('ChannelPreview', () => {
 
     const { getByTestId } = render(getComponent());
 
-    await waitForElement(() => getByTestId('channel-id'));
+    await waitFor(() => getByTestId('channel-id'));
 
     const message = generateMessage({
       user: clientUser,
@@ -148,8 +144,8 @@ describe('ChannelPreview', () => {
       dispatchMessageNewEvent(chatClient, message, channel);
     });
 
-    await wait(() => {
-      expect(getNodeText(getByTestId('unread-count'))).toBe('10');
+    await waitFor(() => {
+      expect(getByTestId('unread-count')).toHaveTextContent('10');
     });
   });
 });

src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  fireEvent,
-  render,
-  wait,
-  waitForElement,
-} from '@testing-library/react-native';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 import truncate from 'lodash/truncate';
 
@@ -66,10 +61,10 @@ describe('ChannelPreviewMessenger', () => {
       }),
     );
 
-    await waitForElement(() => getByTestId('channel-preview-button'));
+    await waitFor(() => getByTestId('channel-preview-button'));
     fireEvent.press(getByTestId('channel-preview-button'));
 
-    await wait(() => {
+    await waitFor(() => {
       // eslint-disable-next-line jest/prefer-called-with
       expect(setActiveChannel).toHaveBeenCalledTimes(1);
     });
@@ -85,7 +80,7 @@ describe('ChannelPreviewMessenger', () => {
       }),
     );
     const { queryByText } = render(getComponent());
-    await waitForElement(() => queryByText(channelName));
+    await waitFor(() => queryByText(channelName));
   });
 
   it('should render comma separated names of other members, if channel has no name', async () => {
@@ -102,7 +97,7 @@ describe('ChannelPreviewMessenger', () => {
     const { queryByText } = render(getComponent());
     const expectedDisplayName = `${m1.user.name}, ${m2.user.name}, ${m3.user.name}`;
 
-    await waitForElement(() => queryByText(expectedDisplayName));
+    await waitFor(() => queryByText(expectedDisplayName));
   });
 
   it('should render latest message, truncated to length given by latestMessageLength', async () => {
@@ -117,6 +112,6 @@ describe('ChannelPreviewMessenger', () => {
     );
 
     const expectedMessagePreview = truncate(message.text, { length: 6 });
-    await waitForElement(() => queryByText(expectedMessagePreview));
+    await waitFor(() => queryByText(expectedMessagePreview));
   });
 });

src/components/CloseButton/__tests__/CloseButton.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, wait } from '@testing-library/react-native';
+import { render, waitFor } from '@testing-library/react-native';
 
 import CloseButton from '../CloseButton';
 
 describe('CloseButton', () => {
   it('should render a CloseButton', async () => {
     const { queryByTestId } = render(<CloseButton />);
 
-    await wait(() => expect(queryByTestId('close-button')).toBeTruthy());
+    await waitFor(() => expect(queryByTestId('close-button')).toBeTruthy());
   });
 });

src/utils/__tests__/Streami18n.test.js

@@ -57,7 +57,7 @@ const customDayjsLocaleConfig = {
 };
 
 describe('Streami18n instance - default', () => {
-  const streami18nOptions = {};
+  const streami18nOptions = { logger: () => {} };
   const streami18n = new Streami18n(streami18nOptions);
 
   it('should provide default english translator', async () => {