test: 修改测试库为@testing-library/react (#69)

* test: 修改测试库为@testing-library/react，删除enzyme

* fix: 修改eslint报错

Author: windole

packages/rc-cli/cjs/jest.config.cjs

@@ -26,7 +26,6 @@ const DEFAULT_CONFIG = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/demo/**', '!**/test/**'],
   coverageDirectory: './tests/coverage',
-  snapshotSerializers: ['enzyme-to-json/serializer'],
 };
 
 function readRootConfig() {

packages/rc-cli/cjs/jest.setup.cjs

@@ -1,4 +1 @@
-const Enzyme = require('enzyme');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
 
-Enzyme.configure({ adapter: new Adapter() });

packages/rc-cli/package.json

@@ -41,7 +41,6 @@
     "@testing-library/react": "^12.1.2",
     "@vant/touch-emulator": "^1.3.2",
     "@vitejs/plugin-react": "^2.0.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "address": "^1.1.2",
     "autoprefixer": "9.7.5",
     "babel-plugin-import": "^1.13.1",
@@ -52,8 +51,6 @@
     "commander": "^9.4.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.24",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.1",
     "esbuild": "^0.14.54",
     "execa": "^5.1.1",
     "fast-glob": "^3.2.4",

packages/rc-ui-lib/jest.config.js

@@ -10,5 +10,5 @@ module.exports = {
     '!**/**/PropsType.ts',
     '!**/test/**',
   ],
-  // testMatch: ['**/badge/__test__/**/*.[jt]s?(x)'],
+  // testMatch: ['**/image-preview/__test__/**/*.spec.[jt]s?(x)'],
 };

packages/rc-ui-lib/package.json

@@ -63,8 +63,6 @@
     "@rancui/cli": "workspace:*",
     "@rancui/linter": "workspace:*",
     "@testing-library/react": "^12.1.2",
-    "@types/enzyme": "^3.10.12",
-    "@types/enzyme-to-json": "^1.5.4",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",

packages/rc-ui-lib/src/action-sheet/__test__/__snapshots__/index.spec.tsx.snap

@@ -1,83 +1,116 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Popup should allow to custom close icon with closeIcon prop 1`] = `
-Array [
-  <Icon
-    className="rc-action-sheet__close"
-    name="success"
-    onClick={[Function]}
-    tag="i"
+<div
+  class="rc-popup rc-popup--round rc-popup--bottom rc-safe-area-bottom rc-action-sheet"
+  style="z-index: 2000; transition-duration: 300ms;"
+>
+  <div
+    class="rc-action-sheet__header"
   >
-    <Badge
-      className="rc-action-sheet__close van-icon van-icon-success"
-      onClick={[Function]}
-      position="top-right"
-      showZero={true}
-      style={
-        Object {
-          "color": undefined,
-          "fontSize": undefined,
-        }
-      }
-      tag="i"
+    Title
+    <i
+      class="rc-badge__wrapper rc-action-sheet__close van-icon van-icon-success"
+    />
+  </div>
+  <div
+    class="rc-action-sheet__content"
+  />
+</div>
+`;
+
+exports[`Popup should allow to custom close icon with closeIcon prop 2`] = `
+<div
+  class="rc-popup rc-popup--round rc-popup--bottom rc-safe-area-bottom rc-action-sheet"
+  style="z-index: 2000; transition-duration: 300ms;"
+>
+  <div
+    class="rc-action-sheet__header"
+  >
+    Title
+    <div
+      class="rc-action-sheet__close"
     >
-      <i
-        className="rc-badge__wrapper rc-action-sheet__close van-icon van-icon-success"
-        onClick={[Function]}
-        style={
-          Object {
-            "color": undefined,
-            "fontSize": undefined,
-          }
-        }
-      />
-    </Badge>
-  </Icon>,
-  <Badge
-    className="rc-action-sheet__close van-icon van-icon-success"
-    onClick={[Function]}
-    position="top-right"
-    showZero={true}
-    style={
-      Object {
-        "color": undefined,
-        "fontSize": undefined,
-      }
-    }
-    tag="i"
+      <i>
+        X
+      </i>
+    </div>
+  </div>
+  <div
+    class="rc-action-sheet__content"
+  />
+</div>
+`;
+
+exports[`Popup should render default slot correctly 1`] = `
+<div
+  class="rc-popup rc-popup--round rc-popup--bottom rc-safe-area-bottom rc-action-sheet"
+  style="z-index: 2000; transition-duration: 300ms;"
+>
+  <div
+    class="rc-action-sheet__header"
   >
+    Title
     <i
-      className="rc-badge__wrapper rc-action-sheet__close van-icon van-icon-success"
-      onClick={[Function]}
-      style={
-        Object {
-          "color": undefined,
-          "fontSize": undefined,
-        }
-      }
+      class="rc-badge__wrapper rc-action-sheet__close van-icon van-icon-cross"
     />
-  </Badge>,
-  <i
-    className="rc-badge__wrapper rc-action-sheet__close van-icon van-icon-success"
-    onClick={[Function]}
-    style={
-      Object {
-        "color": undefined,
-        "fontSize": undefined,
-      }
-    }
-  />,
-]
+  </div>
+  <div
+    class="rc-action-sheet__content"
+  >
+    Default
+  </div>
+</div>
 `;
 
-exports[`Popup should render default slot correctly 1`] = `"<div style=\\"z-index: 2000; animation-duration: 300ms;\\" class=\\"rc-overlay\\"></div><div style=\\"z-index: 2000; transition-duration: 300ms;\\" class=\\"rc-popup rc-popup--round rc-popup--bottom rc-safe-area-bottom rc-action-sheet\\"><div class=\\"rc-action-sheet__header\\">Title<i class=\\"rc-badge__wrapper rc-action-sheet__close van-icon van-icon-cross\\"></i></div><div class=\\"rc-action-sheet__content\\">Default</div></div>"`;
-
 exports[`Popup should render description correctly 1`] = `
 <div
-  className="rc-action-sheet__description"
+  class="rc-popup rc-popup--round rc-popup--bottom rc-safe-area-bottom rc-action-sheet"
+  style="z-index: 2000; transition-duration: 300ms;"
 >
-  This is a description
+  <div
+    class="rc-action-sheet__description"
+  >
+    This is a description
+  </div>
+  <div
+    class="rc-action-sheet__content"
+  />
 </div>
 `;
 
-exports[`Popup should render subname correctly 1`] = `"<button type=\\"button\\" class=\\"rc-action-sheet__item\\"><span class=\\"rc-action-sheet__name\\">Option</span><div class=\\"rc-action-sheet__subname\\">Subname</div></button>"`;
+exports[`Popup should render subname correctly 1`] = `
+<div
+  class="rc-popup rc-popup--round rc-popup--bottom rc-safe-area-bottom rc-action-sheet"
+  style="z-index: 2000; transition-duration: 300ms;"
+>
+  <div
+    class="rc-action-sheet__content"
+  >
+    <button
+      class="rc-action-sheet__item"
+      type="button"
+    >
+      <span
+        class="rc-action-sheet__name"
+      >
+        Option
+      </span>
+      <div
+        class="rc-action-sheet__subname"
+      >
+        Subname
+      </div>
+    </button>
+  </div>
+  <div
+    class="rc-action-sheet__gap"
+  />
+  <button
+    class="rc-action-sheet__cancel"
+    type="button"
+  >
+    Cancel
+  </button>
+</div>
+`;