Merge pull request Expensify#41203 from callstack-internal/feat/add-e…

…sling-plugin-testing-library [NOQA] Add eslint-plugin-testing-library
bernhardoj · May 2, 2024 · d0b8214 · d0b8214
2 parents a69e99e + ed9bdfe
commit d0b8214
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 147 deletions.
diff --git 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
diff --git 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
@@ -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();
                 })
         );
     });