#23 add basic React UI test

babel.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: false,
+      },
+      "jest",
+    ],
+  ],
+  plugins: ["@babel/plugin-syntax-dynamic-import"],
+  env: {
+    test: {
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            modules: "auto",
+          },
+          "jest",
+        ],
+      ],
+      plugins: ["@babel/plugin-transform-runtime"],
+    },
+  },
+};

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  verbose: true,
+  transform: {
+    "^.+\\.(jsx)$": "babel-jest",
+  },
+  moduleNameMapper: {
+    "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+  },
+};

package.json

@@ -23,7 +23,8 @@
     "build": "yarn run build:chrome && yarn run build:firefox && yarn run build:opera",
     "lint": "eslint . --ext .js,.jsx --max-warnings 0",
     "lint:fix": "eslint . --ext .js,.jsx --fix",
-    "format": "prettier --loglevel silent --write \"**/*.(js|ts|jsx|tsx)\""
+    "format": "prettier --loglevel silent --write \"**/*.(js|ts|jsx|tsx)\"",
+    "test": "jest"
   },
   "husky": {
     "hooks": {
@@ -58,12 +59,13 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
     "@babel/plugin-transform-destructuring": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
     "@typescript-eslint/eslint-plugin": "^4.14.2",
     "@typescript-eslint/parser": "^4.14.2",
     "autoprefixer": "^10.0.2",
     "babel-eslint": "^10.0.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.1",
     "babel-plugin-import": "^1.13.3",
     "clean-webpack-plugin": "^3.0.0",
@@ -83,13 +85,16 @@
     "filemanager-webpack-plugin": "^3.0.0-alpha.7",
     "html-webpack-plugin": "^4.5.0",
     "husky": "4",
+    "jest": "^26.6.3",
+    "jest-transform-stub": "^2.0.0",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.3.1",
     "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss": "^8.1.7",
     "postcss-loader": "^4.0.4",
     "prettier": "^2.2.1",
+    "react-test-renderer": "^17.0.2",
     "resolve-url-loader": "^3.1.2",
     "sass-loader": "^10.1.0",
     "terser-webpack-plugin": "^4.2.3",

src/app/components/SetPassword/SetPassword.test.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import renderer from "react-test-renderer";
+
+import SetPassword from "./index";
+
+test("Link changes the class when hovered", () => {
+  const handlePasswordModalOk = () => {
+    console.log("handlePasswordModalOk");
+  };
+  const component = renderer.create(
+    <SetPassword visible={false} onOk={handlePasswordModalOk}></SetPassword>
+  );
+
+  const tree = component.toTree();
+  expect(tree.rendered.props.title).toEqual("Your Password");
+});