test setup with testing library

examples/__tests__/SimpleSlider.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import SimpleSlider from "../SimpleSlider";
+import { render, fireEvent, waitFor, screen } from "@testing-library/react";
+
+describe("SimpleSlider example", () => {
+  test("render", () => {
+    const { container } = render(<SimpleSlider />);
+    expect(container.getElementsByClassName("slick-slide").length).toBe(13);
+  });
+});

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/test-setup.js"]
+};

package.json

@@ -16,7 +16,9 @@
     "prepublish": "npm run build",
     "lint": "eslint src",
     "gen": "node examples/scripts/generateExampleConfigs.js && node examples/scripts/generateExamples.js && xdg-open docs/jquery.html",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "test": "jest",
+    "test-watch": "jest --watch"
   },
   "author": "Kiran Abburi",
   "license": "MIT",
@@ -40,6 +42,8 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "autoprefixer": "^7.1.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.8.0",
@@ -56,6 +60,8 @@
     "foundation-apps": "^1.2.0",
     "gulp": "^4.0.0",
     "husky": "^0.14.3",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "js-beautify": "^1.7.5",
     "json-loader": "^0.5.4",
     "lint-staged": "^12.1.2",

test-setup.js

@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom/extend-expect";
+
+//Fix for "matchMedia not present, legacy browsers require a polyfill jest" error
+window.matchMedia =
+  window.matchMedia ||
+  function() {
+    return {
+      matches: false,
+      addListener: function() {},
+      removeListener: function() {}
+    };
+  };