FE-458: Update to eslint-config 2.12.0 (#1774)

* chore(deps): update to eslint-config 2.12.0

* chore(deps): fix various lint violations

* chore(deps): fix various test issues

* chore(deps): fix remaining test issues

* chore(deps): fix typecheck issues

* chore(deps): tighten lint rules and fix violations

Author: PascalZajac

packages/big-design-icons/src/types/styled.d.ts

@@ -2,6 +2,6 @@ import { ThemeInterface } from '@bigcommerce/big-design-theme';
 import 'styled-components';
 
 declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface DefaultTheme extends ThemeInterface {}
 }

packages/big-design-patterns/src/components/Page/spec.tsx

@@ -48,6 +48,7 @@ test('renders with background', () => {
   };
 
   const { container } = render(<Page background={backgroundProps}>Page content</Page>);
+  // eslint-disable-next-line testing-library/no-node-access
   const firstChild = container.firstElementChild;
 
   if (!firstChild) {
@@ -68,6 +69,7 @@ test('renders with default background styles', () => {
   };
 
   const { container } = render(<Page background={backgroundProps}>Page content</Page>);
+  // eslint-disable-next-line testing-library/no-node-access
   const firstChild = container.firstElementChild;
 
   if (!firstChild) {
@@ -86,6 +88,7 @@ test('renders without background by default', () => {
   render(<Page>Page content</Page>);
 
   const { container } = render(<Page>Page content</Page>);
+  // eslint-disable-next-line testing-library/no-node-access
   const firstChild = container.firstElementChild;
 
   if (!firstChild) {

packages/big-design-patterns/src/utils/warning/spec.ts

@@ -36,7 +36,7 @@ describe('warning', () => {
       isProduction: true,
     }));
 
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const { warning: prodWarning } = require('./warning');
     const mockWarn = jest.fn();
 

packages/big-design-patterns/src/utils/warning/warning.ts

@@ -27,6 +27,6 @@ export const warning = (message: string): void => {
     try {
       throw Error(text);
       // eslint-disable-next-line no-empty
-    } catch (x) {}
+    } catch {}
   }
 };

packages/big-design-theme/src/styled/styled.d.ts

@@ -3,6 +3,6 @@ import 'styled-components';
 import { ThemeInterface } from '..';
 
 declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface DefaultTheme extends ThemeInterface {}
 }

packages/big-design/.eslintrc.js

@@ -2,4 +2,23 @@
 module.exports = {
   root: true,
   extends: [require.resolve('@bigcommerce/configs/eslint/base.js')],
+  rules: {
+    // Disable testing-library rules that conflict with styled-components testing
+    // The big-design library extensively tests styled-components which requires
+    // direct DOM access to verify styles, making these rules impractical to follow
+    'testing-library/no-node-access': 'off',
+    'testing-library/no-container': 'off',
+    'testing-library/prefer-screen-queries': 'off',
+    // Disable specific rules that are too strict for this codebase
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/*.spec.tsx', '**/*.spec.ts', '**/*.test.tsx', '**/*.test.ts'],
+      rules: {
+        // Allow unused variables in test files (often kept for debugging)
+        '@typescript-eslint/no-unused-vars': 'off',
+      },
+    },
+  ],
 };

packages/big-design/src/components/Alert/spec.tsx

@@ -83,7 +83,7 @@ test('renders header', () => {
   const heading = screen.getByRole('heading', { name: /header/i });
 
   expect(alert).toMatchSnapshot();
-  expect(heading).toBeDefined();
+  expect(heading).toBeInTheDocument();
 });
 
 test('uses the header as an accessibility label for the alert', () => {
@@ -99,7 +99,7 @@ test('renders close button', () => {
   const button = screen.getByRole('button');
 
   expect(alert).toMatchSnapshot();
-  expect(button).toBeDefined();
+  expect(button).toBeInTheDocument();
 });
 
 test('trigger onClose', async () => {

packages/big-design/src/components/AnchorNav/spec.tsx

@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { useInView } from 'react-intersection-observer';
@@ -26,7 +26,6 @@ describe('AnchorNav Component', () => {
   });
 
   afterEach(() => {
-    cleanup();
     history.replaceState(null, '', '#');
     jest.clearAllMocks();
     jest.useRealTimers();
@@ -62,7 +61,7 @@ describe('AnchorNav Component', () => {
     expect(section1El?.scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
     expect(replaceStateSpy).toHaveBeenCalledWith(null, '', '#section1');
     expect(navLink1).toHaveClass('active');
-    expect(navLink1.getAttribute('aria-current')).toBe('true');
+    expect(navLink1).toHaveAttribute('aria-current', 'true');
   });
 
   it('activates a section based on the observer inView value', () => {
@@ -80,7 +79,7 @@ describe('AnchorNav Component', () => {
     const navLink2 = screen.getByText('Section 2');
 
     expect(navLink2).toHaveClass('active');
-    expect(navLink2.getAttribute('aria-current')).toBe('true');
+    expect(navLink2).toHaveAttribute('aria-current', 'true');
   });
 
   it('scrolls to the section corresponding to the initial URL hash on load', () => {

packages/big-design/src/components/Badge/spec.tsx

@@ -61,5 +61,5 @@ test("doesn't render if label prop is invalid", () => {
   // @ts-expect-error ignoring since label={Component} is not a valid prop
   const { container } = render(<Badge label={<p>Label</p>} />);
 
-  expect(container.firstChild).toBeNull();
+  expect(container).toBeEmptyDOMElement();
 });

packages/big-design/src/components/Box/Box.tsx

@@ -10,7 +10,7 @@ export interface BoxProps
     DisplayProps,
     MarginProps,
     PaddingProps {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: keyof React.JSX.IntrinsicElements | React.ComponentType<any>;
   backgroundColor?: keyof Colors;
   shadow?: keyof Shadow;
   border?: keyof Border;