feat: Upgrade dependencies and migrate to @testing-library/react

- Upgraded all dependencies to their latest versions.
- Migrated the testing framework from Enzyme to @testing-library/react.
- Refactored the code to be compatible with the new versions of the dependencies.
- Fixed various issues with the Webpack configuration to make it compatible with Webpack 5.

Author: google-labs-jules[bot]

devenv.log

@@ -19,72 +19,77 @@
     "sharing"
   ],
   "jest": {
-    "setupFiles": [
-      "./tests/testSetup.js"
+    "setupFilesAfterEnv": [
+      "./tests/test-utils.tsx"
     ],
     "collectCoverage": true,
     "coverageDirectory": "./coverage",
     "moduleNameMapper": {
-      "^.+\\.(css|styl|svg|jpg)$": "identity-obj-proxy"
+      "^.+\\.(css|styl|jpg)$": "identity-obj-proxy",
+      "\\.svg$": "<rootDir>/tests/mocks/svg.ts"
+    },
+    "testEnvironment": "jsdom",
+    "testEnvironmentOptions": {
+      "url": "http://localhost"
     },
-    "testURL": "http://localhost",
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
     }
   },
   "dependencies": {
-    "brace": "^0.11.0",
-    "joi": "^17.3.0",
-    "parse-link-header": "^1.0.1",
-    "react": "^16.8.6",
-    "react-ace": "^5.9.0",
+    "brace": "^0.11.1",
+    "joi": "^18.0.2",
+    "parse-link-header": "^2.0.0",
+    "react": "^19.2.1",
+    "react-ace": "^14.0.1",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.8.6",
-    "react-router-dom": "^4.2.2",
-    "react-tag-input": "^5.2.3",
-    "recoil": "^0.1.2"
+    "react-dom": "^19.2.1",
+    "react-router-dom": "^7.10.1",
+    "react-tag-input": "^6.10.6",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.12.7",
-    "@babel/runtime": "^7.12.5",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.20",
-    "@types/parse-link-header": "^1.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/enzyme": "^3.10.19",
+    "@types/jest": "^30.0.0",
+    "@types/parse-link-header": "^2.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "^8.0.0",
-    "clean-webpack-plugin": "^0.1.17",
-    "css-loader": "^0.28.7",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^7.17.0",
-    "eslint-plugin-react": "^7.22.0",
-    "file-loader": "^1.1.5",
-    "glob": "^7.1.2",
-    "html-webpack-plugin": "^3.2.0",
+    "babel-loader": "^10.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react": "^7.37.5",
+    "file-loader": "^6.2.0",
+    "glob": "^13.0.0",
+    "html-webpack-plugin": "^5.6.5",
     "identity-obj-proxy": "^3.0.0",
-    "image-webpack-loader": "^5.0.0",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^0.4.0",
-    "style-loader": "^0.19.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.1.3",
-    "webpack": "^4.45.0",
-    "webpack-cli": "^3.1.1",
-    "webpack-dev-server": "^3.11.1"
+    "image-webpack-loader": "^8.1.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "mini-css-extract-plugin": "^2.9.4",
+    "style-loader": "^4.0.0",
+    "stylus": "^0.64.0",
+    "stylus-loader": "^8.1.2",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
+    "webpack": "^5.103.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "scripts": {
     "lint": "eslint --ignore-path .gitignore --ext ts .",

package-lock.json

@@ -7,17 +7,17 @@ const Sidebar: FC = () => (
   <nav className="sidebar">
     <ul className="sidebar-list">
       <li className="sidebar-item">
-        <NavLink exact to="/" activeClassName="active" title="New Snippet">
+        <NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')} title="New Snippet">
           <i className="icon-new" />
         </NavLink>
       </li>
       <li className="sidebar-item sidebar-item-border">
-        <NavLink to="/recent" activeClassName="active" title="Recent Snippets">
+        <NavLink to="/recent" className={({ isActive }) => (isActive ? 'active' : '')} title="Recent Snippets">
           <i className="icon-recent" />
         </NavLink>
       </li>
       <li className="sidebar-item">
-        <NavLink to="/about" activeClassName="active" title="About">
+        <NavLink to="/about" className={({ isActive }) => (isActive ? 'active' : '')} title="About">
           <i className="icon-about" />
         </NavLink>
       </li>

package.json

@@ -1,53 +1,55 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { NavLink } from 'react-router-dom'
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 
-import Sidebar from '../../src/components/Sidebar'
+import Sidebar from '../../src/components/Sidebar';
 
 describe('Sidebar', () => {
   it('should have three items', () => {
-    const wrapper = shallow(<Sidebar />)
-    const navList = wrapper.find('.sidebar-list')
-
-    expect(navList.children()).toHaveLength(3)
-  })
+    render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const list = screen.getByRole('list');
+    const { getAllByRole } = within(list);
+    const items = getAllByRole('listitem');
+    expect(items.length).toBe(3);
+  });
 
   it('should have correct routes on sidebar items', () => {
-    const routes = {
-      0: '/',
-      1: '/recent',
-      2: '/about',
-    }
-    const wrapper = shallow(<Sidebar />)
-
-    expect(wrapper.find(NavLink).at(0).prop('to')).toEqual(routes['0'])
-    expect(wrapper.find(NavLink).at(1).prop('to')).toEqual(routes['1'])
-    expect(wrapper.find(NavLink).at(2).prop('to')).toEqual(routes['2'])
-  })
+    render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const links = screen.getAllByRole('link');
+    expect(links[0]).toHaveAttribute('href', '/');
+    expect(links[1]).toHaveAttribute('href', '/recent');
+    expect(links[2]).toHaveAttribute('href', '/about');
+  });
 
   it('should have correct icons on sidebar items', () => {
-    const icons = {
-      0: 'icon-new',
-      1: 'icon-recent',
-      2: 'icon-about',
-    }
-    const wrapper = shallow(<Sidebar />)
-
-    expect(wrapper.find('i').at(0).prop('className')).toEqual(icons['0'])
-    expect(wrapper.find('i').at(1).prop('className')).toEqual(icons['1'])
-    expect(wrapper.find('i').at(2).prop('className')).toEqual(icons['2'])
-  })
+    const { container } = render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const icons = container.querySelectorAll('i');
+    expect(icons[0]).toHaveClass('icon-new');
+    expect(icons[1]).toHaveClass('icon-recent');
+    expect(icons[2]).toHaveClass('icon-about');
+  });
 
   it('should have correct titles on sidebar items', () => {
-    const titles = {
-      0: 'New Snippet',
-      1: 'Recent Snippets',
-      2: 'About',
-    }
-    const wrapper = shallow(<Sidebar />)
-
-    expect(wrapper.find(NavLink).at(0).prop('title')).toEqual(titles['0'])
-    expect(wrapper.find(NavLink).at(1).prop('title')).toEqual(titles['1'])
-    expect(wrapper.find(NavLink).at(2).prop('title')).toEqual(titles['2'])
-  })
-})
+    render(
+      <MemoryRouter>
+        <Sidebar />
+      </MemoryRouter>
+    );
+    const links = screen.getAllByRole('link');
+    expect(links[0]).toHaveAttribute('title', 'New Snippet');
+    expect(links[1]).toHaveAttribute('title', 'Recent Snippets');
+    expect(links[2]).toHaveAttribute('title', 'About');
+  });
+});

src/components/Sidebar.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import { shallow } from 'enzyme'
+import React from "react";
+import { render, screen } from "@testing-library/react";
 
-import Spinner from '../../../src/components/common/Spinner'
+import Spinner from "../../../src/components/common/Spinner";
 
-describe('Spinner', () => {
-  it('should have one child', () => {
-    const wrapper = shallow(<Spinner />)
-    expect(wrapper.children()).toHaveLength(1)
-  })
-})
+describe("Spinner", () => {
+  it("should render an image", () => {
+    render(<Spinner />);
+    const spinnerElement = screen.getByAltText("Loading...");
+    expect(spinnerElement).toBeInTheDocument();
+  });
+});

tests/components/Sidebar.test.tsx

@@ -1,23 +1,23 @@
-import React from 'react'
-import { shallow } from 'enzyme'
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 
-import Title from '../../../src/components/common/Title'
+import Title from '../../../src/components/common/Title';
 
 const title = 'Snippet page';
 
 describe('Title', () => {
   it('should return correct title', () => {
-    const wrapper = shallow(<Title title={title} />)
-    expect(wrapper.text()).toEqual(title)
-  })
+    render(<Title title={title} />);
+    expect(screen.getByText(title)).toBeInTheDocument();
+  });
 
   it('should have additional class if one was provided', () => {
-    const wrapper = shallow(<Title title={title} additionalClass="custom-title" />)
-    expect(wrapper.hasClass('custom-title')).toEqual(true)
-  })
+    render(<Title title={title} additionalClass="custom-title" />);
+    expect(screen.getByText(title)).toHaveClass('custom-title');
+  });
 
-  it('should not have additional class if one wasn\'t provided', () => {
-    const wrapper = shallow(<Title title={title} />)
-    expect(wrapper.hasClass('custom-title')).toEqual(false)
-  })
-})
+  it("should not have additional class if one wasn't provided", () => {
+    render(<Title title={title} />);
+    expect(screen.getByText(title)).not.toHaveClass('custom-title');
+  });
+});

tests/components/common/Spinner.test.tsx

@@ -0,0 +1 @@
+export default "div";

tests/components/common/Title.test.tsx

@@ -0,0 +1,6 @@
+/// <reference types="@testing-library/jest-dom" />
+
+import "@testing-library/jest-dom";
+import { TextEncoder } from "util";
+
+global.TextEncoder = TextEncoder;