RTL upgrade

Author: Dan Carbonell

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 { getNodeText, 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,7 +46,7 @@ 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');
@@ -58,7 +58,7 @@ 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');

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

@@ -3,8 +3,7 @@ import {
   act,
   getNodeText,
   render,
-  wait,
-  waitForElement,
+  waitFor,
 } from '@testing-library/react-native';
 
 import {
@@ -77,7 +76,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,13 +86,13 @@ describe('ChannelPreview', () => {
 
     const { getByTestId } = render(getComponent());
 
-    await waitForElement(() => getByTestId('channel-id'));
+    await waitFor(() => getByTestId('channel-id'));
     expect(getNodeText(getByTestId('unread-count'))).toBe('20');
-    act(() => {
-      dispatchMessageReadEvent(chatClient, clientUser, channel);
+    await act(async () => {
+      await dispatchMessageReadEvent(chatClient, clientUser, channel);
     });
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getNodeText(getByTestId('unread-count'))).toBe('0');
     });
   });
@@ -112,17 +111,17 @@ describe('ChannelPreview', () => {
 
       const { getByTestId } = render(getComponent());
 
-      await waitForElement(() => getByTestId('channel-id'));
+      await waitFor(() => getByTestId('channel-id'));
 
       const message = generateMessage({
         user: clientUser,
       });
 
-      act(() => {
-        dispatcher(chatClient, message, channel);
+      await act(async () => {
+        await dispatcher(chatClient, message, channel);
       });
 
-      await wait(() => {
+      await waitFor(() => {
         expect(getNodeText(getByTestId('last-event-message'))).toBe(
           message.text,
         );
@@ -136,19 +135,19 @@ describe('ChannelPreview', () => {
 
     const { getByTestId } = render(getComponent());
 
-    await waitForElement(() => getByTestId('channel-id'));
+    await waitFor(() => getByTestId('channel-id'));
 
     const message = generateMessage({
       user: clientUser,
     });
 
     channel.countUnread = () => 10;
 
-    act(() => {
-      dispatchMessageNewEvent(chatClient, message, channel);
+    await act(async () => {
+      await dispatchMessageNewEvent(chatClient, message, channel);
     });
 
-    await wait(() => {
+    await waitFor(() => {
       expect(getNodeText(getByTestId('unread-count'))).toBe('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());
   });
 });