Replace enzyme with RTL

.eslintrc.json

@@ -10,7 +10,8 @@
     "plugin:import/errors", // Enable eslint-plugin-import
     "plugin:import/warnings",
     "plugin:jsx-a11y/recommended", // Enable eslint-plugin-jsx-a11y
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:jest/recommended"
   ],
   "parser": "babel-eslint",
   "parserOptions": {
@@ -20,7 +21,7 @@
     "ecmaVersion": 12,
     "sourceType": "module"
   },
-  "plugins": ["react"],
+  "plugins": ["react", "jest"],
   "rules": {
     "react/display-name": "off"
   },

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+};

jest.config.js

@@ -0,0 +1,16 @@
+const path = require("path");
+
+module.exports = {
+  testEnvironment: "jsdom", // Use jsdom environment for DOM-related tests
+  roots: ["./src"], // The root directory for running tests
+  transform: {
+    "^.+\\.(js|jsx)$": "babel-jest",
+  },
+  testMatch: ["**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)"], // File patterns for test files
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"], // Setup file to extend Jest with RTL matchers
+  moduleNameMapper: {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+    "^src/(.*)$": path.resolve(__dirname, "src/$1"), // Add the moduleNameMapper for your alias
+  },
+  transformIgnorePatterns: ["/node_modules/(?!(lodash-es)/)"],
+};

package.json

@@ -13,11 +13,6 @@
     "type": "git",
     "url": "https://github.com/xiaolin/react-image-gallery.git"
   },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/tests/setupTestFramework.js"
-    ]
-  },
   "style": "styles/css/image-gallery.css",
   "keywords": [
     "react",
@@ -46,22 +41,25 @@
     "@babel/core": "^7.13.14",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.6.2",
     "babel-loader": "^8.2.2",
     "clsx": "^1.0.4",
     "css-loader": "^5.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
-    "jest": "^26.6.3",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "27.2.3",
     "lodash-es": "^4.17.21",
     "mini-css-extract-plugin": "^2.1.0",
     "postcss": "^8.2.10",

src/__tests__/ImageGallery.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ImageGallery from "../ImageGallery";
+
+describe("<ImageGallery />", () => {
+  const defaultProps = {
+    items: [
+      {
+        original: "test.png",
+        thumbnail: "test_thumb.png",
+      },
+    ],
+  };
+
+  it("renders slides", () => {
+    render(<ImageGallery {...defaultProps} />);
+    const elements = screen.getAllByLabelText("Go to Slide 1");
+    // expect a thumbnail and slide label
+    expect(elements.length).toBe(2);
+  });
+});