feat: add eslint-plugin-jest-dom (#13392)

* feat: add eslint-plugin-jest-dom

* fix: eslint errors

* fix(rebase): eslint, tests

* fix: lint jest-dom config only test files

---------

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

config/eslint-config-carbon/package.json

@@ -41,6 +41,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^26.9.0",
+    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsdoc": "^40.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",

config/eslint-config-carbon/plugins/jest.js

@@ -8,9 +8,10 @@
 'use strict';
 
 module.exports = {
-  plugins: ['eslint-plugin-jest'],
+  plugins: ['eslint-plugin-jest', 'jest-dom'],
   overrides: [
     {
+      extends: ['plugin:jest-dom/recommended'],
       files: ['*-test.js', '*.test.js', '*-spec.js', '*.spec.js'],
       env: {
         'jest/globals': true,

packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js

@@ -43,10 +43,10 @@ describe('Icon', () => {
     );
 
     const getContainer = () => mountNode.querySelector('svg');
-    expect(getContainer().getAttribute('focusable')).toBe('false');
+    expect(getContainer()).toHaveAttribute('focusable', 'false');
 
     render(<Icon focusable />, mountNode);
-    expect(getContainer().getAttribute('focusable')).toBe('true');
+    expect(getContainer()).toHaveAttribute('focusable', 'true');
   });
 
   it('should forward refs to the rendered SVG DOM element', () => {
@@ -69,7 +69,7 @@ describe('Icon', () => {
       mountNode
     );
 
-    expect(getContainer().getAttribute('aria-label')).toBeDefined();
+    expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(false);
 
@@ -82,7 +82,7 @@ describe('Icon', () => {
       mountNode
     );
 
-    expect(getContainer().getAttribute('aria-label')).toBeDefined();
+    expect(getContainer()).not.toHaveAttribute('aria-label');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(false);
 
@@ -99,7 +99,7 @@ describe('Icon', () => {
       mountNode
     );
 
-    expect(getContainer().getAttribute('aria-label')).toBeDefined();
+    expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(true);
   });

packages/react/src/components/Accordion/__tests__/Accordion-test.js

@@ -130,7 +130,7 @@ describe('Accordion', () => {
         skipClick: true,
       });
 
-      expect(screen.getByText('Panel A')).toBeDefined();
+      expect(screen.getByText('Panel A')).toBeInTheDocument();
     });
 
     it('should open with spacebar', async () => {
@@ -154,7 +154,7 @@ describe('Accordion', () => {
         skipClick: true,
       });
 
-      expect(screen.getByText('Panel A')).toBeDefined();
+      expect(screen.getByText('Panel A')).toBeInTheDocument();
     });
   });
 

packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js

@@ -53,7 +53,7 @@ describe('AspectRatio', () => {
 
       const container = document.querySelector('[data-testid="test"]');
       expect(container).not.toBe(null);
-      expect(container.classList.contains('test')).toBe(true);
+      expect(container).toHaveClass('test');
     });
 
     it('should forward extra props to the outermost node', () => {
@@ -66,7 +66,7 @@ describe('AspectRatio', () => {
       );
       const container = mountNode.firstChild;
       expect(container).not.toBe(null);
-      expect(container.getAttribute('data-testid')).toBe('test');
+      expect(container).toHaveAttribute('data-testid');
 
       Simulate.click(container);
       expect(onClick).toHaveBeenCalledTimes(1);
@@ -95,7 +95,7 @@ describe('AspectRatio', () => {
       expect(article).not.toBe(null);
 
       // Make sure props are forwarded to a custom base component
-      expect(article.classList.contains('test')).toBe(true);
+      expect(article).toHaveClass('test');
     });
   });
 });

packages/react/src/components/Button/__tests__/Button-test.js

@@ -39,10 +39,10 @@ describe('Button', () => {
 
   it('should use the disabled prop to set disabled on the <button>', () => {
     const { rerender } = render(<Button>test</Button>);
-    expect(screen.getByRole('button')).not.toHaveAttribute('disabled');
+    expect(screen.getByRole('button')).toBeEnabled();
 
     rerender(<Button disabled>test</Button>);
-    expect(screen.getByRole('button')).toHaveAttribute('disabled');
+    expect(screen.getByRole('button')).toBeDisabled();
   });
 
   it('should render with a default button type of button', () => {

packages/react/src/components/Checkbox/__tests__/Checkbox-test.js

@@ -23,7 +23,7 @@ describe('Checkbox', () => {
 
   it('should use defaultChecked to set the default value of the <input> checkbox', () => {
     render(<Checkbox id="test" labelText="test-label" defaultChecked />);
-    expect(screen.getByRole('checkbox').checked).toBe(true);
+    expect(screen.getByRole('checkbox')).toBeChecked();
   });
 
   it('should support a custom `className` prop on the outermost element', () => {
@@ -41,18 +41,18 @@ describe('Checkbox', () => {
 
   it('should disable the <input> if disabled is provided as a prop', () => {
     const { rerender } = render(<Checkbox id="test" labelText="test-label" />);
-    expect(screen.getByRole('checkbox').disabled).toBe(false);
+    expect(screen.getByRole('checkbox')).toBeEnabled();
 
     rerender(<Checkbox id="test" labelText="test-label" disabled />);
-    expect(screen.getByRole('checkbox').disabled).toBe(true);
+    expect(screen.getByRole('checkbox')).toBeDisabled();
   });
 
   it('should set checked on the <input> if checked is provided as a prop', () => {
     render(<Checkbox id="test1" labelText="test-label-1" />);
-    expect(screen.getByLabelText('test-label-1').checked).toBe(false);
+    expect(screen.getByLabelText('test-label-1')).not.toBeChecked();
 
     render(<Checkbox id="test2" labelText="test-label-2" checked />);
-    expect(screen.getByLabelText('test-label-2').checked).toBe(true);
+    expect(screen.getByLabelText('test-label-2')).toBeChecked();
   });
 
   it('should hide the label if hideLabel is provided as a prop', () => {

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet-test.js

@@ -172,12 +172,12 @@ describe('Show more button', () => {
   it('should not have show more button when less then 15 rows', () => {
     render(<CodeSnippet type="multi">{multiShort}</CodeSnippet>);
 
-    expect(screen.queryByText('Show more')).toBe(null);
+    expect(screen.queryByText('Show more')).not.toBeInTheDocument();
   });
 
   it('should not have show more button when exactly 15 rows', () => {
     render(<CodeSnippet type="multi">{multi15}</CodeSnippet>);
 
-    expect(screen.queryByText('Show more')).toBe(null);
+    expect(screen.queryByText('Show more')).not.toBeInTheDocument();
   });
 });

packages/react/src/components/CodeSnippet/__tests__/CodeSnippet.Skeleton-test.js

@@ -45,6 +45,6 @@ describe('CodeSnippetSkeleton', () => {
   it('should support a custom `className` on the outer-most element', () => {
     const className = 'test';
     const { container } = render(<CodeSnippetSkeleton className={className} />);
-    expect(container.firstChild.classList.contains(className)).toBe(true);
+    expect(container.firstChild).toHaveClass(className);
   });
 });

packages/react/src/components/ComboButton/ComboButton-test.js

@@ -153,7 +153,7 @@ describe('ComboButton', () => {
 
       await userEvent.click(screen.getAllByRole('button')[1]);
 
-      expect(screen.getByRole('menu')).toBeTruthy();
+      expect(screen.getByRole('menu')).toBeInTheDocument();
       expect(screen.getByRole('menuitem')).toHaveTextContent(
         /^Additional action$/
       );

packages/react/src/components/ComposedModal/ModalFooter-test.js

@@ -41,7 +41,7 @@ describe('ModalFooter', () => {
       />
     );
 
-    expect(screen.getByText('Submit')).toHaveProperty('disabled', true);
+    expect(screen.getByText('Submit')).toBeDisabled();
   });
 
   it('should pass classes to primary button', () => {

packages/react/src/components/ContainedList/__tests__/ContainedList-test.js

@@ -61,24 +61,22 @@ describe('ContainedList', () => {
       `.${prefix}--contained-list__label`
     );
 
-    expect(list.getAttribute('aria-labelledby')).toBe(label.id);
+    expect(list).toHaveAttribute('aria-labelledby', label.id);
   });
 
   it('renders props.label', () => {
     const label = wrapper.container.querySelector(
       `.${prefix}--contained-list__label`
     );
 
-    expect(label.textContent).toBe(defaultProps.list.label);
+    expect(label).toHaveTextContent(defaultProps.list.label);
   });
 
   it('supports additional css class names', () => {
     const className = 'some-class';
     wrapper.rerender(<TestComponent list={{ className }} />);
 
-    expect(wrapper.container.firstChild.classList.contains(className)).toBe(
-      true
-    );
+    expect(wrapper.container.firstChild).toHaveClass(className);
   });
 
   a11y('ContainedList');
@@ -88,16 +86,14 @@ describe('ContainedListItem', () => {
   it('renders props.children', () => {
     const content = wrapper.getByRole('listitem');
 
-    expect(content.textContent).toBe(defaultProps.item.children);
+    expect(content).toHaveTextContent(defaultProps.item.children);
   });
 
   it('supports additional css class names', () => {
     const className = 'some-class';
     wrapper.rerender(<TestComponent item={{ className }} />);
 
-    expect(wrapper.getByRole('listitem').classList.contains(className)).toBe(
-      true
-    );
+    expect(wrapper.getByRole('listitem')).toHaveClass(className);
   });
 
   it('renders props.action adjacent to content', () => {

packages/react/src/components/Copy/Copy-test.js

@@ -58,7 +58,7 @@ describe('Button props', () => {
       </Copy>
     );
 
-    expect(screen.getByTestId('copy-button-3')).toHaveAttribute('disabled');
+    expect(screen.getByTestId('copy-button-3')).toBeDisabled();
   });
 
   it('should call the click handler', () => {

packages/react/src/components/CopyButton/CopyButton-test.js

@@ -48,7 +48,7 @@ describe('Button props', () => {
       />
     );
 
-    expect(screen.getByTestId('copy-btn-3')).toHaveAttribute('disabled');
+    expect(screen.getByTestId('copy-btn-3')).toBeDisabled();
   });
 
   it('should call the click handler', () => {

packages/react/src/components/DataTable/__tests__/DataTable-test.js

@@ -402,9 +402,7 @@ describe('DataTable', () => {
 
       it('should have select-all default to un-checked if no rows are present', () => {
         render(<DataTable {...mockProps} rows={[]} />);
-        expect(screen.getAllByRole('checkbox')[0]).not.toHaveAttribute(
-          'checked'
-        );
+        expect(screen.getAllByRole('checkbox')[0]).not.toBeChecked();
       });
 
       it('should select all rows if a user interacts with select all', () => {

packages/react/src/components/DataTable/__tests__/TableSelectAll-test.js

@@ -76,7 +76,7 @@ describe('TableSelectAll', () => {
         </Table>
       );
 
-      expect(screen.getByRole('checkbox').checked).toEqual(true);
+      expect(screen.getByRole('checkbox')).toBeChecked();
     });
 
     it('should support a custom `className` prop on the outermost element', () => {
@@ -118,7 +118,7 @@ describe('TableSelectAll', () => {
         </Table>
       );
 
-      expect(screen.getByRole('checkbox').disabled).toEqual(true);
+      expect(screen.getByRole('checkbox')).toBeDisabled();
     });
 
     it('should respect id prop', () => {

packages/react/src/components/DataTable/__tests__/TableSelectRow-test.js

@@ -67,7 +67,7 @@ describe('DataTable.TableSelectRow', () => {
         </Table>
       );
 
-      expect(screen.getByRole('checkbox').checked).toBe(true);
+      expect(screen.getByRole('checkbox')).toBeChecked();
     });
 
     it('should support a custom `className` prop on the outermost element', () => {
@@ -97,7 +97,7 @@ describe('DataTable.TableSelectRow', () => {
         </Table>
       );
 
-      expect(screen.getByRole('checkbox').disabled).toBe(true);
+      expect(screen.getByRole('checkbox')).toBeDisabled();
     });
 
     it('should respect id prop', () => {

packages/react/src/components/Dropdown/Dropdown-test.js

@@ -150,7 +150,7 @@ describe('Dropdown', () => {
     assertMenuClosed();
 
     openMenu(); // menu should not open
-    expect(screen.queryByText('Item 0')).toBeNull();
+    expect(screen.queryByText('Item 0')).not.toBeInTheDocument();
     expect(mockProps.onChange).toHaveBeenCalledTimes(0);
     assertMenuClosed();
 
@@ -187,7 +187,7 @@ describe('Dropdown', () => {
     it('should accept a `ref` for the underlying button element', () => {
       const ref = React.createRef();
       render(<Dropdown {...mockProps} ref={ref} />);
-      expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox');
+      expect(ref.current).toHaveAttribute('aria-haspopup', 'listbox');
     });
   });
 });

packages/react/src/components/FileUploader/__tests__/FileUploader-test.js

@@ -28,7 +28,7 @@ describe('FileUploader', () => {
 
   it('should support a custom class name on the root element', () => {
     const { container } = render(<FileUploader className="test" />);
-    expect(container.firstChild.classList.contains('test')).toBe(true);
+    expect(container.firstChild).toHaveClass('test');
   });
 
   it('should not update the label by default when selecting files', () => {

packages/react/src/components/FileUploader/__tests__/FileUploaderButton-test.js

@@ -24,7 +24,7 @@ describe('FileUploaderButton', () => {
 
   it('should support a custom class name on the root element', () => {
     const { container } = render(<FileUploaderButton className="test" />);
-    expect(container.firstChild.classList.contains('test')).toBe(true);
+    expect(container.firstChild).toHaveClass('test');
   });
 
   it('should call `onClick` if the label is clicked', () => {

packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js

@@ -25,7 +25,7 @@ describe('FileUploaderDropContainer', () => {
       <FileUploaderDropContainer className="test" />
     );
     const dropArea = container.querySelector('button');
-    expect(dropArea.classList.contains('test')).toBe(true);
+    expect(dropArea).toHaveClass('test');
   });
 
   it('should have a unique id each time it is used', () => {

packages/react/src/components/FileUploader/__tests__/FileUploaderSkeleton-test.js

@@ -29,6 +29,6 @@ describe('FileUploaderSkeleton', () => {
     const { container } = render(
       <FileUploaderSkeleton className={className} />
     );
-    expect(container.firstChild.classList.contains(className)).toBe(true);
+    expect(container.firstChild).toHaveClass(className);
   });
 });

packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js

@@ -180,7 +180,7 @@ describe('FluidDropdown', () => {
     it('should accept a `ref` for the underlying button element', () => {
       const ref = React.createRef();
       render(<FluidDropdown {...mockProps} ref={ref} />);
-      expect(ref.current.getAttribute('aria-haspopup')).toBe('listbox');
+      expect(ref.current).toHaveAttribute('aria-haspopup', 'listbox');
     });
   });
 });

packages/react/src/components/FluidTextInput/__tests__/FluidTextInput-test.js

@@ -75,10 +75,7 @@ describe('FluidTextInput', () => {
         />
       );
 
-      expect(screen.getByRole('textbox')).toHaveAttribute(
-        'value',
-        'This is default text'
-      );
+      expect(screen.getByRole('textbox')).toHaveValue('This is default text');
     });
 
     it('should respect disabled prop', () => {
@@ -186,10 +183,7 @@ describe('FluidTextInput', () => {
         />
       );
 
-      expect(screen.getByRole('textbox')).toHaveAttribute(
-        'value',
-        'This is a test value'
-      );
+      expect(screen.getByRole('textbox')).toHaveValue('This is a test value');
     });
 
     it('should respect warn prop', () => {