feat: add jest and add useClickOuntside test file and opt gulpfile

.babelrc

@@ -5,7 +5,8 @@
             {
                 "modules": false
             }
-        ]
+        ],
+        // "@babel/preset-typescript"
     ],
     "include": "**/*.js",
     "exclude": "**/*.ts"

.eslintignore

@@ -1,4 +1,5 @@
-lib/
-es/
-dist/
-hooooks_doc/
+/lib/
+/es/
+/dist/
+/hooooks_doc/
+/src/**/test

gulpfile.js

@@ -2,14 +2,13 @@
  * @Date: 2020-08-05 11:12:51
  * @LastEditors: Hans
  * @description:
- * @LastEditTime: 2020-08-12 15:39:49
+ * @LastEditTime: 2020-08-21 17:33:18
  * @FilePath: /hooooks/gulpfile.js
  */
-const { src, dest, series } = require("gulp");
+const { dest, series } = require("gulp");
 const ts = require("gulp-typescript");
 const babel = require("gulp-babel");
 const del = require("del");
-const sourceFilePath = "src/hooks/**/*.ts";
 
 async function clean() {
     await del("dist/**");
@@ -22,7 +21,8 @@ function commonjs() {
     const tsProject = ts.createProject("tsconfig.json", {
         module: "commonjs",
     });
-    return src(sourceFilePath)
+    return tsProject
+        .src()
         .pipe(tsProject())
         .pipe(
             babel({
@@ -37,9 +37,10 @@ function es() {
         module: "ESNEXT",
     });
     return (
-        src(sourceFilePath)
+        tsProject
+            .src()
             .pipe(tsProject())
-            .js// .pipe(
+            .js // .pipe(
             //     babel({
             //         configFile: "./.babelrc",
             //     }),
@@ -55,7 +56,7 @@ function declare() {
         // 仅构建*.d.ts文件
         emitDeclarationOnly: true,
     });
-    return src(sourceFilePath).pipe(tsProject()).pipe(dest("@types/")).pipe(dest("es/")).pipe(dest("lib/"));
+    return tsProject.src().pipe(tsProject()).pipe(dest("@types/")).pipe(dest("es/")).pipe(dest("lib/"));
 }
 
 exports.default = series(clean, commonjs, es, declare);

jest.config.js

@@ -0,0 +1,15 @@
+/*
+ * @Date: 2020-08-21 16:03:14
+ * @LastEditors: Hans
+ * @description:
+ * @LastEditTime: 2020-08-21 16:27:26
+ * @FilePath: /hooooks/jest.config.js
+ */
+module.exports = {
+    preset: "ts-jest/presets/js-with-ts",
+    globals: {
+        "ts-jest": {
+            tsconfig: "tsconfig.json",
+        },
+    },
+};

package.json

@@ -1,13 +1,14 @@
 {
     "name": "hooooks",
-    "version": "1.0.18",
+    "version": "1.0.19",
     "author": "Hans",
     "license": "ISC",
     "main": "./lib/index.js",
     "module": "./es/index.js",
     "types": "./lib/index.d.ts",
     "unpkg": "./dist/hooooks.js",
     "scripts": {
+        "test": "jest",
         "build:gulp": "gulp",
         "build": "webpack --progress --colors --config ./webpack.config.js",
         "pub": "npm run build:gulp && npm run build && npm publish"
@@ -24,6 +25,8 @@
         "@babel/preset-typescript": "^7.10.4",
         "@commitlint/cli": "^9.1.1",
         "@commitlint/config-conventional": "^9.1.1",
+        "@testing-library/react-hooks": "^3.4.1",
+        "@types/jest": "^26.0.10",
         "@typescript-eslint/eslint-plugin": "^3.9.0",
         "@typescript-eslint/parser": "^3.9.0",
         "del": "^5.1.0",
@@ -34,9 +37,12 @@
         "gulp-cli": "^2.3.0",
         "gulp-typescript": "^6.0.0-alpha.1",
         "husky": "^4.2.5",
+        "jest": "^26.4.1",
         "lint-staged": "^10.2.11",
         "prettier": "^2.0.5",
+        "react-test-renderer": "^16.13.1",
         "ts-import-plugin": "^1.6.2",
+        "ts-jest": "^26.2.0",
         "ts-loader": "^6.2.1",
         "typescript": "^3.9.5",
         "webpack": "^4.43.0",

src/hooks/useClickOutside/index.ts

@@ -2,32 +2,35 @@
  * @Date: 2020-05-27 15:52:03
  * @LastEditors: Hans
  * @description:
- * @LastEditTime: 2020-08-12 19:44:05
+ * @LastEditTime: 2020-08-21 18:07:50
  * @FilePath: /hooooks/src/hooks/useClickOutside/index.ts
  */
 
-import { MutableRefObject, useRef, useLayoutEffect } from "react";
+import { MutableRefObject, useRef, useLayoutEffect, useCallback } from "react";
 import { getTargetObject, targetObjectType } from "../utils";
 
 const useClickOutside = <T extends HTMLElement>(
     onClickOutSide: (e: MouseEvent) => void,
     ele?: targetObjectType<T>,
 ): MutableRefObject<T> => {
     const clickRef = useRef<T>();
-    useLayoutEffect(() => {
-        const target = getTargetObject(clickRef.current ? clickRef : ele);
-        if (!target) return () => {};
-        const handleClickOutside = (e: MouseEvent) => {
+    const handleClickOutside = useCallback(
+        (e: MouseEvent) => {
+            const target = getTargetObject(clickRef.current ? clickRef : ele);
+            if (!target) return () => {};
             const targetElement = e.target as Element;
             if (!target.contains(targetElement)) {
                 onClickOutSide(e);
             }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
+        },
+        [ele, onClickOutSide],
+    );
+    useLayoutEffect(() => {
+        document.addEventListener("click", handleClickOutside);
         return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
+            document.removeEventListener("click", handleClickOutside);
         };
-    }, [clickRef, ele]);
+    }, [clickRef, ele, handleClickOutside]);
     return (clickRef as MutableRefObject<T>) || undefined;
 };
 

src/hooks/useClickOutside/test/index.test.tsx

@@ -0,0 +1,44 @@
+/*
+ * @Date: 2020-08-21 14:46:00
+ * @LastEditors: Hans
+ * @description:
+ * @LastEditTime: 2020-08-21 18:47:42
+ * @FilePath: /hooooks/src/hooks/useClickOutside/test/index.test.tsx
+ */
+import { renderHook } from "@testing-library/react-hooks";
+
+import useClickOutside from "..";
+
+describe("useClickOutside", () => {
+    it("should be defined", async () => {
+        expect(useClickOutside).toBeDefined();
+    });
+
+    let testDom: HTMLDivElement;
+    beforeEach(() => {
+        testDom = document.createElement("div");
+        document.body.appendChild(testDom);
+    });
+
+    afterEach(() => {
+        document.body.removeChild(testDom);
+    });
+
+    it("test on dom selector", async () => {
+        let count = 0;
+        const { rerender, unmount } = renderHook((dom: () => HTMLDivElement) =>
+            useClickOutside<HTMLDivElement>(() => {
+                count = count + 1;
+            }, dom),
+        );
+
+        rerender(() => testDom);
+        testDom.click();
+        expect(count).toEqual(0);
+        document.body.click();
+        expect(count).toEqual(1);
+        unmount();
+        document.body.click();
+        expect(count).toEqual(1);
+    });
+});

tsconfig.json

@@ -12,9 +12,10 @@
         "removeComments": true,
         "allowSyntheticDefaultImports": true,
         "declaration": false,
+        "skipLibCheck": true,
         "paths": {
             "@/*": ["src/*"]
         }
     },
-    "exclude": ["node_modules", "lib", "es"]
+    "exclude": ["node_modules", "lib", "es", "dist", "hooooks_doc", "**/test"]
 }