chore(deps): update dependency @zendeskgarden/eslint-config to v26 (#1261)

* chore(deps): update dependency @zendeskgarden/eslint-config to v26

* Update eslint dependencies, tests, & config

Co-authored-by: Renovate Bot <[email protected]>
Co-authored-by: hzhu <[email protected]>

Author: 3 people

.storybook/main.js

@@ -7,6 +7,7 @@
 
 const webpack = require('webpack');
 const externalConfig = require('../.svgo.config.js');
+const ESLintPlugin = require('eslint-webpack-plugin');
 const docs = process.env.BROWSER ? process.env.BROWSER.toUpperCase() !== 'IE11' : true;
 
 module.exports = {
@@ -20,19 +21,6 @@ module.exports = {
 
     fileLoaderRule.exclude = /@zendeskgarden\/svg-icons/u;
 
-    config.module.rules.push({
-      test: /\.tsx?$/u,
-      use: [
-        {
-          loader: 'eslint-loader',
-          options: {
-            emitWarning: true
-          }
-        }
-      ],
-      enforce: 'pre'
-    });
-
     config.module.rules.push({
       test: /\.svg$/u,
       use: [
@@ -48,7 +36,8 @@ module.exports = {
     config.plugins.push(
       new webpack.DefinePlugin({
         PACKAGE_VERSION: JSON.stringify('storybook')
-      })
+      }),
+      new ESLintPlugin({ emitWarning: true, extensions: '.tsx' })
     );
 
     return config;

package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@babel/cli": "7.16.0",
     "@babel/core": "7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "7.16.5",
     "@babel/plugin-proposal-object-rest-spread": "7.16.5",
     "@babel/plugin-transform-object-assign": "7.16.5",
@@ -55,16 +56,15 @@
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
     "@types/styled-components": "5.1.18",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
+    "@typescript-eslint/eslint-plugin": "5.7.0",
+    "@typescript-eslint/parser": "5.7.0",
     "@zendeskgarden/css-bedrock": "9.0.0",
-    "@zendeskgarden/eslint-config": "21.0.0",
+    "@zendeskgarden/eslint-config": "26.0.0",
     "@zendeskgarden/scripts": "1.4.0",
     "@zendeskgarden/stylelint-config": "16.0.1",
     "@zendeskgarden/svg-icons": "6.30.2",
     "acorn-jsx": "5.3.2",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
@@ -76,16 +76,16 @@
     "coveralls": "3.1.1",
     "enhanced-resolve": "4.5.0",
     "envalid": "7.2.2",
-    "eslint": "7.32.0",
+    "eslint": "8.4.1",
     "eslint-config-prettier": "8.3.0",
-    "eslint-loader": "4.0.2",
     "eslint-plugin-garden-local": "file:./utils/eslint",
-    "eslint-plugin-jest": "24.7.0",
+    "eslint-plugin-jest": "25.3.0",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-notice": "0.9.10",
     "eslint-plugin-react": "7.27.1",
     "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-webpack-plugin": "^3.1.1",
     "execa": "5.1.1",
     "fork-ts-checker-webpack-plugin": "6.5.0",
     "fuzzy": "0.1.3",

packages/avatars/src/elements/Avatar.spec.tsx

@@ -55,13 +55,13 @@ describe('Avatar', () => {
   });
 
   it('renders text element if provided', () => {
-    const { getByTestId } = render(
+    const { getByText } = render(
       <Avatar>
-        <Avatar.Text data-test-id="text">AG</Avatar.Text>
+        <Avatar.Text>AG</Avatar.Text>
       </Avatar>
     );
 
-    expect(getByTestId('text')).not.toBeUndefined();
+    expect(getByText('AG')).toBeDefined();
   });
 
   describe('Invalid', () => {

packages/chrome/src/elements/header/HeaderItem.spec.tsx

@@ -54,8 +54,8 @@ describe('HeaderItem', () => {
       talk: PALETTE.product.talk
     };
 
-    PRODUCTS.forEach(product => {
-      it(`renders correct ${product} color if provided`, () => {
+    it('renders correct product color', () => {
+      PRODUCTS.forEach(product => {
         const { container } = render(<HeaderItem hasLogo product={product} />);
 
         expect(container.firstChild).toHaveStyleRule('color', VALID_COLOR_MAP[product]);

packages/chrome/src/elements/nav/NavItem.spec.tsx

@@ -154,8 +154,8 @@ describe('NavItem', () => {
       talk: PALETTE.product.talk
     };
 
-    PRODUCTS.forEach(product => {
-      it(`renders correct ${product} color if provided`, () => {
+    it('renders correct product color if provided', () => {
+      PRODUCTS.forEach(product => {
         const { container } = render(<NavItem hasLogo product={product} />);
 
         expect(container.firstChild).toHaveStyleRule('color', VALID_COLOR_MAP[product]);

packages/dropdowns/src/elements/Dropdown/Dropdown.tsx

@@ -55,8 +55,7 @@ export interface IDropdownProps {
     stateAndHelpers: ControllerStateAndHelpers<any>
   ) => void;
   /** Passes customization props to the [Downshift](https://www.downshift-js.com/) component */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  downshiftProps?: object;
+  downshiftProps?: Record<string, any>;
 }
 
 const Dropdown: React.FunctionComponent<IDropdownProps & ThemeProps<DefaultTheme>> = props => {

packages/forms/src/elements/common/Message.spec.tsx

@@ -72,17 +72,16 @@ describe('Message', () => {
   });
 
   describe('Validation', () => {
-    (['success', 'warning', 'error'] as VALIDATION[]).forEach(validation => {
-      it(`renders expected ${validation} component`, () => {
-        const { getByTestId } = render(
+    it('renders expected component for each validation type', () => {
+      (['success', 'warning', 'error'] as VALIDATION[]).forEach(validation => {
+        const text = `This is ${validation} text`;
+        const { getByText } = render(
           <Field>
-            <Message data-test-id="message" validation={validation}>
-              Test
-            </Message>
+            <Message validation={validation}>{text}</Message>
           </Field>
         );
 
-        expect(getByTestId('message').firstChild!.nodeName).toBe('svg');
+        expect(getByText(text).firstChild!.nodeName).toBe('svg');
       });
     });
   });

packages/forms/src/styled/common/StyledMessageIcon.spec.tsx

@@ -23,8 +23,8 @@ describe('StyledMessageIcon', () => {
   });
 
   describe('Validation', () => {
-    (['success', 'warning', 'error'] as VALIDATION[]).forEach(validation => {
-      it(`renders ${validation} styling if provided`, () => {
+    it('renders validation styling', () => {
+      (['success', 'warning', 'error'] as VALIDATION[]).forEach(validation => {
         const { container } = render(<StyledMessageIcon validation={validation} />);
 
         expect(container.firstChild!.nodeName).toBe('svg');