diff --git a/.eslintrc.js b/.eslintrc.js index c1b6a9676052..c8a842fa4650 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -78,7 +78,7 @@ const restrictedImportPatterns = [ module.exports = { extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-native-a11y/basic', 'plugin:@dword-design/import-alias/recommended', 'prettier'], - plugins: ['react-native-a11y'], + plugins: ['react-native-a11y', 'testing-library'], parser: 'babel-eslint', ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', 'node_modules/.cache/**', '.git/**'], env: { @@ -130,6 +130,20 @@ module.exports = { files: ['tests/**/*.js', 'tests/**/*.ts', 'tests/**/*.jsx', 'assets/**/*.js', '.storybook/**/*.js'], rules: {'@dword-design/import-alias/prefer-alias': ['off']}, }, + { + files: ['tests/**/*.js', 'tests/**/*.ts', 'tests/**/*.jsx', 'tests/**/*.tsx'], + extends: ['plugin:testing-library/react'], + rules: { + 'testing-library/await-async-queries': 'error', + 'testing-library/await-async-utils': 'error', + 'testing-library/no-debugging-utils': 'error', + 'testing-library/no-manual-cleanup': 'error', + 'testing-library/no-unnecessary-act': 'error', + 'testing-library/prefer-find-by': 'error', + 'testing-library/prefer-presence-queries': 'error', + 'testing-library/prefer-screen-queries': 'error', + }, + }, { files: ['*.js', '*.jsx'], settings: { diff --git a/package-lock.json b/package-lock.json index 02d3be0ae17b..5962d3b29504 100644 --- a/package-lock.json +++ b/package-lock.json @@ -213,6 +213,7 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react-native-a11y": "^3.3.0", "eslint-plugin-storybook": "^0.8.0", + "eslint-plugin-testing-library": "^6.2.2", "eslint-plugin-you-dont-need-lodash-underscore": "^6.12.0", "html-webpack-plugin": "^5.5.0", "jest": "29.4.1", @@ -14286,6 +14287,15 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/arr-diff": { "version": "4.0.0", "license": "MIT", @@ -19600,14 +19610,6 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": { - "version": "5.3.0", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "dequal": "^2.0.3" - } - }, "node_modules/eslint-plugin-jsx-a11y/node_modules/axobject-query": { "version": "3.2.1", "dev": true, @@ -19786,6 +19788,22 @@ "lodash": "^4.17.15" } }, + "node_modules/eslint-plugin-testing-library": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.2.2.tgz", + "integrity": "sha512-1E94YOTUDnOjSLyvOwmbVDzQi/WkKm3WVrMXu6SmBr6DN95xTGZmI6HJ/eOkSXh/DlheRsxaPsJvZByDBhWLVQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/utils": "^5.58.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0", + "npm": ">=6" + }, + "peerDependencies": { + "eslint": "^7.5.0 || ^8.0.0" + } + }, "node_modules/eslint-plugin-you-dont-need-lodash-underscore": { "version": "6.12.0", "dev": true, diff --git a/package.json b/package.json index 350d6a6ac6e5..d8d2e105d0c6 100644 --- a/package.json +++ b/package.json @@ -265,6 +265,7 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react-native-a11y": "^3.3.0", "eslint-plugin-storybook": "^0.8.0", + "eslint-plugin-testing-library": "^6.2.2", "eslint-plugin-you-dont-need-lodash-underscore": "^6.12.0", "html-webpack-plugin": "^5.5.0", "jest": "29.4.1", diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx index 6c90a3dbf841..5218c1e696c9 100644 --- a/tests/ui/UnreadIndicatorsTest.tsx +++ b/tests/ui/UnreadIndicatorsTest.tsx @@ -439,11 +439,11 @@ describe('Unread Indicators', () => { expect(displayNameTexts).toHaveLength(2); const firstReportOption = displayNameTexts[0]; expect(firstReportOption?.props?.style?.fontWeight).toBe(FontUtils.fontWeight.bold); - expect(firstReportOption?.props?.children?.[0]).toBe('C User'); + expect(screen.getByText('C User')).toBeOnTheScreen(); const secondReportOption = displayNameTexts[1]; expect(secondReportOption?.props?.style?.fontWeight).toBe(FontUtils.fontWeight.bold); - expect(secondReportOption?.props?.children?.[0]).toBe('B User'); + expect(screen.getByText('B User')).toBeOnTheScreen(); // Tap the new report option and navigate back to the sidebar again via the back button return navigateToSidebarOption(0); @@ -456,9 +456,9 @@ describe('Unread Indicators', () => { const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(2); expect(displayNameTexts[0]?.props?.style?.fontWeight).toBe(undefined); - expect(displayNameTexts[0]?.props?.children?.[0]).toBe('C User'); + expect(screen.getAllByText('C User')[0]).toBeOnTheScreen(); expect(displayNameTexts[1]?.props?.style?.fontWeight).toBe(FontUtils.fontWeight.bold); - expect(displayNameTexts[1]?.props?.children?.[0]).toBe('B User'); + expect(screen.getByText('B User')).toBeOnTheScreen(); })); xit('Manually marking a chat message as unread shows the new line indicator and updates the LHN', () => @@ -490,7 +490,7 @@ describe('Unread Indicators', () => { const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(displayNameTexts[0]?.props?.style?.fontWeight).toBe(FontUtils.fontWeight.bold); - expect(displayNameTexts[0]?.props?.children?.[0]).toBe('B User'); + expect(screen.getByText('B User')).toBeOnTheScreen(); // Navigate to the report again and back to the sidebar return navigateToSidebarOption(0); @@ -502,7 +502,7 @@ describe('Unread Indicators', () => { const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(displayNameTexts[0]?.props?.style?.fontWeight).toBe(undefined); - expect(displayNameTexts[0]?.props?.children?.[0]).toBe('B User'); + expect(screen.getByText('B User')).toBeOnTheScreen(); // Navigate to the report again and verify the new line indicator is missing return navigateToSidebarOption(0); @@ -615,7 +615,7 @@ describe('Unread Indicators', () => { const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); const alternateText = screen.queryAllByLabelText(hintText); expect(alternateText).toHaveLength(1); - expect(alternateText[0].props.children).toBe('Current User Comment 1'); + expect(screen.getByText('Current User Comment 1')).toBeOnTheScreen(); if (lastReportAction) { Report.deleteReportComment(REPORT_ID, lastReportAction); @@ -626,7 +626,7 @@ describe('Unread Indicators', () => { const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); const alternateText = screen.queryAllByLabelText(hintText); expect(alternateText).toHaveLength(1); - expect(alternateText[0].props.children).toBe('Comment 9'); + expect(screen.getAllByText('Comment 9')[0]).toBeOnTheScreen(); }) ); }); diff --git a/tests/unit/CalendarPickerTest.tsx b/tests/unit/CalendarPickerTest.tsx index 8beb02ec80c4..9c471be5b035 100644 --- a/tests/unit/CalendarPickerTest.tsx +++ b/tests/unit/CalendarPickerTest.tsx @@ -1,5 +1,5 @@ import type ReactNavigationNative from '@react-navigation/native'; -import {fireEvent, render, within} from '@testing-library/react-native'; +import {fireEvent, render, screen, within} from '@testing-library/react-native'; import {addMonths, addYears, subMonths, subYears} from 'date-fns'; import type {ComponentType} from 'react'; import CalendarPicker from '@components/DatePicker/CalendarPicker'; @@ -45,40 +45,40 @@ describe('CalendarPicker', () => { const currentDate = new Date(); const maxDate = addYears(new Date(currentDate), 1); const minDate = subYears(new Date(currentDate), 1); - const {getByText} = render( + render( , ); - expect(getByText(monthNames[currentDate.getMonth()])).toBeTruthy(); - expect(getByText(currentDate.getFullYear().toString())).toBeTruthy(); + expect(screen.getByText(monthNames[currentDate.getMonth()])).toBeTruthy(); + expect(screen.getByText(currentDate.getFullYear().toString())).toBeTruthy(); }); test('clicking next month arrow updates the displayed month', () => { const minDate = new Date('2022-01-01'); const maxDate = new Date('2030-01-01'); - const {getByTestId, getByText} = render( + render( , ); - fireEvent.press(getByTestId('next-month-arrow')); + fireEvent.press(screen.getByTestId('next-month-arrow')); const nextMonth = addMonths(new Date(), 1).getMonth(); - expect(getByText(monthNames[nextMonth])).toBeTruthy(); + expect(screen.getByText(monthNames[nextMonth])).toBeTruthy(); }); test('clicking previous month arrow updates the displayed month', () => { - const {getByTestId, getByText} = render(); + render(); - fireEvent.press(getByTestId('prev-month-arrow')); + fireEvent.press(screen.getByTestId('prev-month-arrow')); const prevMonth = subMonths(new Date(), 1).getMonth(); - expect(getByText(monthNames[prevMonth])).toBeTruthy(); + expect(screen.getByText(monthNames[prevMonth])).toBeTruthy(); }); test('clicking a day updates the selected date', () => { @@ -86,7 +86,7 @@ describe('CalendarPicker', () => { const minDate = new Date('2022-01-01'); const maxDate = new Date('2030-01-01'); const value = '2023-01-01'; - const {getByText} = render( + render( { />, ); - fireEvent.press(getByText('15')); + fireEvent.press(screen.getByText('15')); expect(onSelectedMock).toHaveBeenCalledWith('2023-01-15'); expect(onSelectedMock).toHaveBeenCalledTimes(1); @@ -106,7 +106,7 @@ describe('CalendarPicker', () => { const value = '2022-01-01'; const minDate = new Date('2022-01-01'); const maxDate = new Date('2030-01-01'); - const {getByText, getByTestId} = render( + render( { />, ); - fireEvent.press(getByTestId('next-month-arrow')); - fireEvent.press(getByText('15')); + fireEvent.press(screen.getByTestId('next-month-arrow')); + fireEvent.press(screen.getByText('15')); expect(onSelectedMock).toHaveBeenCalledWith('2022-02-15'); }); @@ -124,126 +124,126 @@ describe('CalendarPicker', () => { test('should block the back arrow when there is no available dates in the previous month', () => { const minDate = new Date('2003-02-01'); const value = new Date('2003-02-17'); - const {getByTestId} = render( + render( , ); - expect(getByTestId('prev-month-arrow')).toBeDisabled(); + expect(screen.getByTestId('prev-month-arrow')).toBeDisabled(); }); test('should block the next arrow when there is no available dates in the next month', () => { const maxDate = new Date('2003-02-24'); const value = '2003-02-17'; - const {getByTestId} = render( + render( , ); - expect(getByTestId('next-month-arrow')).toBeDisabled(); + expect(screen.getByTestId('next-month-arrow')).toBeDisabled(); }); test('should allow navigating to the month of the max date when it has less days than the selected date', () => { const maxDate = new Date('2003-11-27'); // This month has 30 days const value = '2003-10-31'; - const {getByTestId} = render( + render( , ); - expect(getByTestId('next-month-arrow')).not.toBeDisabled(); + expect(screen.getByTestId('next-month-arrow')).not.toBeDisabled(); }); test('should open the calendar on a month from max date if it is earlier than current month', () => { const onSelectedMock = jest.fn(); const maxDate = new Date('2011-03-01'); - const {getByText} = render( + render( , ); - fireEvent.press(getByText('1')); + fireEvent.press(screen.getByText('1')); expect(onSelectedMock).toHaveBeenCalledWith('2011-03-01'); }); test('should open the calendar on a year from max date if it is earlier than current year', () => { const maxDate = new Date('2011-03-01'); - const {getByTestId} = render(); + render(); - expect(within(getByTestId('currentYearText')).getByText('2011')).toBeTruthy(); + expect(within(screen.getByTestId('currentYearText')).getByText('2011')).toBeTruthy(); }); test('should open the calendar on a month from min date if it is later than current month', () => { const minDate = new Date('2035-02-16'); const maxDate = new Date('2040-02-16'); - const {getByTestId} = render( + render( , ); - expect(within(getByTestId('currentYearText')).getByText(minDate.getFullYear().toString())).toBeTruthy(); + expect(within(screen.getByTestId('currentYearText')).getByText(minDate.getFullYear().toString())).toBeTruthy(); }); test('should not allow to press earlier day than minDate', () => { const value = '2003-02-17'; const minDate = new Date('2003-02-16'); - const {getByLabelText} = render( + render( , ); - expect(getByLabelText('15')).toBeDisabled(); + expect(screen.getByLabelText('15')).toBeDisabled(); }); test('should not allow to press later day than max', () => { const value = '2003-02-17'; const maxDate = new Date('2003-02-24'); - const {getByLabelText} = render( + render( , ); - expect(getByLabelText('25')).toBeDisabled(); + expect(screen.getByLabelText('25')).toBeDisabled(); }); test('should allow to press min date', () => { const value = '2003-02-17'; const minDate = new Date('2003-02-16'); - const {getByLabelText} = render( + render( , ); - expect(getByLabelText('16')).not.toBeDisabled(); + expect(screen.getByLabelText('16')).not.toBeDisabled(); }); test('should allow to press max date', () => { const value = '2003-02-17'; const maxDate = new Date('2003-02-24'); - const {getByLabelText} = render( + render( , ); - expect(getByLabelText('24')).not.toBeDisabled(); + expect(screen.getByLabelText('24')).not.toBeDisabled(); }); }); diff --git a/tests/unit/ReportActionItemSingleTest.ts b/tests/unit/ReportActionItemSingleTest.ts index 74a0b5f24777..e0bf06be1609 100644 --- a/tests/unit/ReportActionItemSingleTest.ts +++ b/tests/unit/ReportActionItemSingleTest.ts @@ -1,4 +1,4 @@ -import {cleanup, screen, waitFor} from '@testing-library/react-native'; +import {screen, waitFor} from '@testing-library/react-native'; import Onyx from 'react-native-onyx'; import type {PersonalDetailsList} from '@src/types/onyx'; import {toCollectionDataSet} from '@src/types/utils/CollectionDataSet'; @@ -33,7 +33,6 @@ describe('ReportActionItemSingle', () => { // Clear out Onyx after each test so that each test starts with a clean slate afterEach(() => { - cleanup(); Onyx.clear(); }); @@ -54,11 +53,8 @@ describe('ReportActionItemSingle', () => { }, }; - beforeEach(() => { - LHNTestUtils.getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar, fakeReport, fakeReportAction); - }); - function setup() { + LHNTestUtils.getDefaultRenderedReportActionItemSingle(shouldShowSubscriptAvatar, fakeReport, fakeReportAction); const policyCollectionDataSet = toCollectionDataSet(ONYXKEYS.COLLECTION.POLICY, [fakePolicy], (item) => item.id); return waitForBatchedUpdates().then(() => @@ -70,13 +66,12 @@ describe('ReportActionItemSingle', () => { ); } - it('renders secondary Avatar properly', () => { + it('renders secondary Avatar properly', async () => { const expectedSecondaryIconTestId = 'SvgDefaultAvatar_w Icon'; - return setup().then(() => { - waitFor(() => { - expect(screen.getByTestId(expectedSecondaryIconTestId)).toBeDefined(); - }); + await setup(); + await waitFor(() => { + expect(screen.getByTestId(expectedSecondaryIconTestId)).toBeOnTheScreen(); }); }); @@ -84,7 +79,7 @@ describe('ReportActionItemSingle', () => { const [expectedPerson] = fakeReportAction.person ?? []; return setup().then(() => { - expect(screen.getByText(expectedPerson.text ?? '')).toBeDefined(); + expect(screen.getByText(expectedPerson.text ?? '')).toBeOnTheScreen(); }); }); }); diff --git a/tests/unit/SidebarFilterTest.ts b/tests/unit/SidebarFilterTest.ts index 3f8678fa8cf9..09ad1c379a09 100644 --- a/tests/unit/SidebarFilterTest.ts +++ b/tests/unit/SidebarFilterTest.ts @@ -1,4 +1,4 @@ -import {cleanup, screen} from '@testing-library/react-native'; +import {screen} from '@testing-library/react-native'; import Onyx from 'react-native-onyx'; import DateUtils from '@libs/DateUtils'; import * as Localize from '@libs/Localize'; @@ -45,11 +45,8 @@ xdescribe('Sidebar', () => { return Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false}); }); - // Cleanup (ie. unmount) all rendered components and clear out Onyx after each test so that each test starts with a clean slate - afterEach(() => { - cleanup(); - return Onyx.clear(); - }); + // clear out Onyx after each test so that each test starts with a clean slate + afterEach(() => Onyx.clear()); describe('in default (most recent) mode', () => { it('excludes a report with no participants', () => { @@ -365,7 +362,7 @@ xdescribe('Sidebar', () => { const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); - expect(displayNames[0].props.children[0]).toBe('Three, Four'); + expect(screen.getByText('One, Two')).toBeOnTheScreen(); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); @@ -410,8 +407,9 @@ xdescribe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); - expect(displayNames[0].props.children[0]).toBe('One, Two'); - expect(displayNames[1].props.children[0]).toBe('Three, Four'); + + expect(screen.getByText('One, Two')).toBeOnTheScreen(); + expect(screen.getByText('Three, Four')).toBeOnTheScreen(); }) // When report3 becomes unread @@ -484,8 +482,9 @@ xdescribe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); - expect(displayNames[0].props.children[0]).toBe('Three, Four'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); + + expect(screen.getByText('One, Two')).toBeOnTheScreen(); + expect(screen.getByText('Three, Four')).toBeOnTheScreen(); }) ); }); @@ -711,7 +710,7 @@ xdescribe('Sidebar', () => { const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); - expect(displayNames[0].props.children[0]).toBe('Three, Four'); + expect(screen.getByText('One, Two')).toBeOnTheScreen(); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); diff --git a/tests/unit/SidebarOrderTest.ts b/tests/unit/SidebarOrderTest.ts index fd39d4efef65..644bba5a589b 100644 --- a/tests/unit/SidebarOrderTest.ts +++ b/tests/unit/SidebarOrderTest.ts @@ -1,4 +1,4 @@ -import {cleanup, screen} from '@testing-library/react-native'; +import {screen} from '@testing-library/react-native'; import Onyx from 'react-native-onyx'; import * as Report from '@libs/actions/Report'; import DateUtils from '@libs/DateUtils'; @@ -48,7 +48,6 @@ describe('Sidebar', () => { // Clear out Onyx after each test so that each test starts with a clean slate afterEach(() => { - cleanup(); Onyx.clear(); }); @@ -149,11 +148,11 @@ describe('Sidebar', () => { .then(() => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); - expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('Three, Four'); - expect(displayNames[2].props.children[0]).toBe('One, Two'); + + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); + expect(displayNames[2]).toHaveTextContent('One, Two'); }) ); }); @@ -204,9 +203,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('One, Two'); // this has `hasDraft` flag enabled so it will be on top - expect(displayNames[1].props.children[0]).toBe('Five, Six'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('One, Two'); // this has `hasDraft` flag enabled so it will be on top + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); }); @@ -255,9 +254,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('One, Two'); - expect(displayNames[1].props.children[0]).toBe('Five, Six'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('One, Two'); + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); }); @@ -309,10 +308,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(displayNames[0].props.children[0]).toBe(taskReportName); - expect(displayNames[1].props.children[0]).toBe('Five, Six'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); - expect(displayNames[3].props.children[0]).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent(taskReportName); + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); + expect(displayNames[3]).toHaveTextContent('One, Two'); }) ); }); @@ -373,10 +372,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(displayNames[0].props.children[0]).toBe('Email Two owes $100.00'); - expect(displayNames[1].props.children[0]).toBe('Five, Six'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); - expect(displayNames[3].props.children[0]).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Email Two owes $100.00'); + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); + expect(displayNames[3]).toHaveTextContent('One, Two'); }) ); }); @@ -441,10 +440,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(displayNames[0].props.children[0]).toBe('Workspace owes $100.00'); - expect(displayNames[1].props.children[0]).toBe('Email Five'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); - expect(displayNames[3].props.children[0]).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Workspace owes $100.00'); + expect(displayNames[1]).toHaveTextContent('Email Five'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); + expect(displayNames[3]).toHaveTextContent('One, Two'); }) ); }); @@ -500,9 +499,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Three, Four'); - expect(displayNames[1].props.children[0]).toBe('Five, Six'); - expect(displayNames[2].props.children[0]).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Three, Four'); + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('One, Two'); }) ); }); @@ -657,9 +656,9 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(3); expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(1); expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(1); - expect(displayNames[0].props.children[0]).toBe('Email Two owes $100.00'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Email Two owes $100.00'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); }); @@ -709,9 +708,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) // When a new report is added @@ -722,10 +721,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Seven, Eight'); - expect(displayNames[3].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Seven, Eight'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -778,9 +777,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) // When a new report is added @@ -798,10 +797,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Seven, Eight'); - expect(displayNames[3].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Seven, Eight'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -851,9 +850,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('Three, Four'); - expect(displayNames[2].props.children[0]).toBe('Report (archived)'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); + expect(displayNames[2]).toHaveTextContent('Report (archived)'); }) ); }); @@ -892,9 +891,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) // When a new report is added @@ -905,10 +904,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Seven, Eight'); - expect(displayNames[3].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Seven, Eight'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -953,9 +952,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('Three, Four'); - expect(displayNames[2].props.children[0]).toBe('Report (archived)'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); + expect(displayNames[2]).toHaveTextContent('Report (archived)'); }) ); }); @@ -1094,11 +1093,11 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(5); - expect(displayNames[0].props.children[0]).toBe('Email Five owes $100.00'); - expect(displayNames[1].props.children[0]).toBe('Email Four owes $1,000.00'); - expect(displayNames[2].props.children[0]).toBe('Email Six owes $100.00'); - expect(displayNames[3].props.children[0]).toBe('Email Three owes $100.00'); - expect(displayNames[4].props.children[0]).toBe('Email Two owes $100.00'); + expect(displayNames[0]).toHaveTextContent('Email Five owes $100.00'); + expect(displayNames[1]).toHaveTextContent('Email Four owes $1,000.00'); + expect(displayNames[2]).toHaveTextContent('Email Six owes $100.00'); + expect(displayNames[3]).toHaveTextContent('Email Three owes $100.00'); + expect(displayNames[4]).toHaveTextContent('Email Two owes $100.00'); }) ); }); @@ -1149,9 +1148,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(displayNames[0].props.children[0]).toBe('Five, Six'); - expect(displayNames[1].props.children[0]).toBe('One, Two'); - expect(displayNames[2].props.children[0]).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); }); diff --git a/tests/unit/SidebarTest.ts b/tests/unit/SidebarTest.ts index 23ea0d377634..c037c1ced3f0 100644 --- a/tests/unit/SidebarTest.ts +++ b/tests/unit/SidebarTest.ts @@ -1,4 +1,4 @@ -import {cleanup, screen} from '@testing-library/react-native'; +import {screen} from '@testing-library/react-native'; import Onyx from 'react-native-onyx'; import CONST from '@src/CONST'; import * as Localize from '@src/libs/Localize'; @@ -31,7 +31,6 @@ describe('Sidebar', () => { // Clear out Onyx after each test so that each test starts with a clean slate afterEach(() => { - cleanup(); Onyx.clear(); }); @@ -79,11 +78,11 @@ describe('Sidebar', () => { .then(() => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); - expect(displayNames[0].props.children[0]).toBe('Report (archived)'); + expect(displayNames[0]).toHaveTextContent('Report (archived)'); const hintMessagePreviewText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); const messagePreviewTexts = screen.queryAllByLabelText(hintMessagePreviewText); - expect(messagePreviewTexts[0].props.children).toBe('This chat room has been archived.'); + expect(messagePreviewTexts[0]).toHaveTextContent('This chat room has been archived.'); }) ); }); @@ -131,11 +130,11 @@ describe('Sidebar', () => { .then(() => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); - expect(displayNames[0].props.children[0]).toBe('Report (archived)'); + expect(displayNames[0]).toHaveTextContent('Report (archived)'); const hintMessagePreviewText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); const messagePreviewTexts = screen.queryAllByLabelText(hintMessagePreviewText); - expect(messagePreviewTexts[0].props.children).toBe('This chat is no longer active because Vikings Policy is no longer an active workspace.'); + expect(messagePreviewTexts[0]).toHaveTextContent('This chat is no longer active because Vikings Policy is no longer an active workspace.'); }) ); });