test: init testing

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     "plugin:react/recommended",
     "airbnb",
     "plugin:prettier/recommended",
+    "plugin:jest/recommended",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -16,7 +17,7 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint", "react-hooks"],
+  plugins: ["react", "@typescript-eslint", "react-hooks", "jest"],
   rules: {
     quotes: 0,
     camelcase: 0,

jest.config.js

@@ -0,0 +1,28 @@
+const { readdirSync } = require("fs");
+const { join } = require("path");
+
+const pkgList = readdirSync(join(__dirname, "./packages")).filter(
+  (pkg) => pkg.charAt(0) !== "."
+);
+
+const moduleNameMapper = {
+  "\\.(css|less|sass|scss)$": require.resolve("identity-obj-proxy"),
+};
+
+pkgList.forEach((shortName) => {
+  const name = `@fortune-sheet/${shortName}`;
+  moduleNameMapper[name] = join(__dirname, `./packages/${shortName}/src`);
+});
+
+module.exports = {
+  collectCoverageFrom: ["packages/**/src/**/*.{ts,tsx}"],
+  testEnvironment: "jsdom",
+  moduleNameMapper,
+  moduleFileExtensions: ["js", "jsx", "cjs", "ts", "tsx"],
+  transform: {
+    "\\.(t|j)sx?$": require.resolve("./tests/transformer"),
+  },
+  unmockedModulePathPatterns: ["node_modules/react/", "node_modules/enzyme/"],
+  verbose: true,
+  setupFiles: ["./tests/setup.js"],
+};

package.json

@@ -15,28 +15,41 @@
     "tsc": "tsc --noEmit",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./packages",
     "postinstall": "patch-package",
-    "publish": "lerna publish --registry 'https://registry.npmjs.org'"
+    "publish": "lerna publish --registry 'https://registry.npmjs.org'",
+    "test": "jest"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-interactions": "^6.4.19",
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@types/enzyme": "^3.10.11",
+    "@types/jest": "^27.4.1",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
+    "enzyme": "^3.11.0",
     "eslint": "^8.10.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^26.1.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "father-build": "^1.21.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.3.1",
     "lerna": "^4.0.0",
     "lint-staged": "^12.3.4",
     "patch-package": "^6.4.7",

tests/index.test.tsx

@@ -0,0 +1,12 @@
+import { mount } from "enzyme";
+import React from "react";
+import { Workbook } from "@fortune-sheet/react";
+import { waitForComponentToPaint } from "./util";
+
+describe("Worksheet", () => {
+  it("should render", async () => {
+    const wrapper = mount(<Workbook data={[{ name: "Sheet1" }]} />);
+    await waitForComponentToPaint(wrapper);
+    expect(wrapper.exists(".fortune-sheet-container")).toBeTruthy();
+  });
+});

tests/setup.js

@@ -0,0 +1,67 @@
+import Enzyme from "enzyme";
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
+import "jest-canvas-mock";
+
+import React from "react";
+
+global.React = React;
+
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useLayoutEffect: jest.requireActual("react").useEffect,
+}));
+
+jest.setTimeout(60000);
+
+Enzyme.configure({ adapter: new Adapter() });
+
+Object.defineProperty(window, "open", {
+  value: jest.fn,
+});
+
+global.requestAnimationFrame =
+  global.requestAnimationFrame ||
+  function requestAnimationFrame(cb) {
+    return setTimeout(cb, 0);
+  };
+
+global.cancelAnimationFrame =
+  global.cancelAnimationFrame ||
+  function cancelAnimationFrame() {
+    return null;
+  };
+
+// browserMocks.js
+export const localStorageMock = (() => {
+  let store = {
+    locale: "zh",
+  };
+
+  return {
+    getItem(key) {
+      return store[key] || null;
+    },
+    setItem(key, value) {
+      store[key] = value.toString();
+    },
+    removeItem(key) {
+      store[key] = null;
+    },
+    clear() {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+  writable: true,
+});
+
+Object.defineProperty(window, "cancelAnimationFrame", {
+  value: () => null,
+});
+
+Math.random = () => 0.8404419276253765;
+
+global.URL.createObjectURL = () => {};

tests/transformer.js

@@ -0,0 +1,9 @@
+const babel = require("babel-jest");
+
+module.exports = babel.default.createTransformer({
+  presets: [
+    require.resolve("@babel/preset-typescript"),
+    "@babel/preset-react",
+    ["@babel/preset-env", { targets: { node: "current" } }],
+  ],
+});

tests/util.ts

@@ -0,0 +1,12 @@
+import { act } from "react-dom/test-utils";
+
+export const waitForComponentToPaint = async (wrapper: any, time = 50) => {
+  // @ts-ignore
+  await act(async () => {
+    wrapper.update?.();
+    await new Promise((resolve) => {
+      setTimeout(resolve, time);
+    });
+    wrapper.update?.();
+  });
+};