feat: 添加 react 组件单测配置

.github/workflows/test.yml

@@ -2,6 +2,10 @@ name: test
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+  pull-requests: read
+
 jobs:
   tsc:
     runs-on: ubuntu-latest
@@ -19,6 +23,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: detect RN component changes
+        id: changes
+        uses: dorny/paths-filter@v4
+        with:
+          filters: |
+            rn_components:
+              - 'packages/webpack-plugin/lib/runtime/components/react/**'
+              - 'packages/webpack-plugin/test/runtime/react-native/components/**'
+              - 'packages/webpack-plugin/test/__mocks__/**'
+              - 'packages/webpack-plugin/jest.config.react.json'
       - name: Cache node modules
         id: cache
         uses: actions/cache@v4
@@ -59,4 +73,8 @@ jobs:
         run: npm run build:tsc
 
       - name: exec unit test
-        run: npm t && npm t --prefix test/e2e/miniprogram-project && npm t --prefix test/e2e/plugin-project
+        run: npm run test:base && npm t --prefix test/e2e/miniprogram-project && npm t --prefix test/e2e/plugin-project
+
+      - name: exec RN component unit test
+        if: steps.changes.outputs.rn_components == 'true'
+        run: npm run test:react -w @mpxjs/webpack-plugin

.gitignore

@@ -22,6 +22,7 @@ docs-vitepress/.vitepress/dist
 docs-vitepress/.vitepress/cache
 dev-dist
 packages/webpack-plugin/lib/runtime/components/react/dist/
+coverage/
 packages/perf/dist/
 .agent-workflows/
 .agents/skills/mpx/

docs-vitepress/guide/rn/component.md

@@ -345,8 +345,7 @@ movable-view的可移动区域。
 
 | 事件名           | 说明                |
 | ----------------| ------------------ |
-| change      | radio-group 中选中项发生改变时触发 change 事件，`detail = { value: [ 选中的 radio 的 value 的数组 ] }` |
-
+| change | radio-group 中选中项发生改变时触发 change 事件，`detail = { value: [ 选中的 radio 的 value 的数组 ] }` |
 
 ### form
 表单。

package.json

@@ -7,7 +7,8 @@
     "lint": "eslint --ext .js,.ts,.tsx,.jsx packages/",
     "fix": "eslint --fix --ext .js,.ts,.tsx,.jsx packages/",
     "lint:js": "eslint --ext .js packages/",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
+    "test": "npm run test:base && npm run test:react -w @mpxjs/webpack-plugin",
+    "test:base": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "test:review-loop": "jest --config .agents/skills/review-loop/jest.config.json --runInBand",
     "release": "npm run lint && npm run test && npx lerna version",
     "lerna:publish": "lerna publish from-package --yes",

packages/webpack-plugin/jest.config.json

@@ -4,8 +4,16 @@
   },
   "testEnvironment": "jsdom",
   "moduleNameMapper": {
-    "\\.(css|styl)$": "identity-obj-proxy"
+    "\\.(css|styl)$": "identity-obj-proxy",
+    "^@mpxjs/utils$": "<rootDir>/../utils/src/index.js"
   },
-  "setupFiles": ["<rootDir>/test/runtime/react-native/setup.js"],
-  "testTimeout": 10000
+  "testPathIgnorePatterns": [
+    "/node_modules/",
+    "/dist/",
+    "test/runtime/react-native/components/"
+  ],
+  "transformIgnorePatterns": [
+    "node_modules/(?!(\\.pnpm/)?(react-native|@react-native|react-native-.*|@react-navigation|@mpxjs))"
+  ],
+  "setupFiles": ["<rootDir>/test/runtime/react-native/setup.js"]
 }

packages/webpack-plugin/jest.config.react.json

@@ -0,0 +1,47 @@
+{
+  "transform": {
+    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { "rootMode": "upward" }]
+  },
+  "testEnvironment": "node",
+  "coverageProvider": "v8",
+  "moduleNameMapper": {
+    "\\.(css|styl)$": "identity-obj-proxy",
+    "^@mpxjs/utils$": "<rootDir>/../utils/src/index.js",
+    "^react-native$": "<rootDir>/test/__mocks__/react-native-pure.js",
+    "^react-native-safe-area-context$": "<rootDir>/test/__mocks__/react-native-safe-area-context.js",
+    "^react-native-linear-gradient$": "<rootDir>/test/__mocks__/react-native-linear-gradient.js",
+    "^react-native-gesture-handler$": "<rootDir>/test/__mocks__/react-native-gesture-handler.js",
+    "^react-native-reanimated$": "<rootDir>/test/__mocks__/react-native-reanimated.js",
+    "^react-native-fast-image$": "<rootDir>/test/__mocks__/react-native-fast-image.js",
+    "^@d11/react-native-fast-image$": "<rootDir>/test/__mocks__/react-native-fast-image.js",
+    "\\.(png|jpg|jpeg|gif|webp)$": "<rootDir>/test/__mocks__/fileMock.js"
+  },
+  "setupFilesAfterEnv": [
+    "<rootDir>/test/runtime/react-native/components/setup.js"
+  ],
+  "testMatch": [
+    "<rootDir>/test/runtime/react-native/components/**/*.test.(js|jsx|ts|tsx)"
+  ],
+  "testPathIgnorePatterns": [
+    "/node_modules/",
+    "/dist/"
+  ],
+  "collectCoverageFrom": [
+    "lib/runtime/components/react/**/*.{ts,tsx}",
+    "!lib/runtime/components/react/**/*.d.ts",
+    "!lib/runtime/components/react/dist/**",
+    "!lib/runtime/components/react/mpx-canvas/html.ts",
+    "!lib/runtime/components/react/mpx-picker/type.ts"
+  ],
+  "coverageThreshold": {
+    "global": {
+      "statements": 90,
+      "functions": 90,
+      "lines": 90,
+      "branches": 90
+    }
+  },
+  "transformIgnorePatterns": [
+    "node_modules/(?!(\\.pnpm/)?(react-native|@react-native|react-native-.*|@react-navigation|@mpxjs))"
+  ]
+}

packages/webpack-plugin/lib/runtime/components/react/mpx-camera.tsx

@@ -20,7 +20,7 @@ interface CameraProps {
   flash?: 'auto' | 'on' | 'off'
   'frame-size'?: 'small' | 'medium' | 'large'
   style?: Record<string, any>
-  bindstop?: () => void
+  bindstop?: (event: Record<string, any>) => void
   binderror?: (error: { message: string }) => void
   bindinitdone?: (result: { type: string, data: string }) => void
   bindscancode?: (result: { type: string, data: string }) => void
@@ -177,7 +177,7 @@ const _camera = forwardRef<HandlerRef<any, CameraProps>, CameraProps>((props: Ca
   }, [bindinitdone, maxZoom])
 
   const onStopped = useCallback(() => {
-    bindstop && bindstop()
+    bindstop && bindstop(getCustomEvent('stop', {}, { layoutRef }))
   }, [bindstop])
 
   const camera: CameraRef = useMemo(() => ({

packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/Image.ts

@@ -13,8 +13,8 @@ export class Image {
   canvas: any;
   width: number;
   height: number;
-  private _loadListener: any;
-  private _errorListener: any;
+  private _removeLoadListener?: () => void;
+  private _removeErrorListener?: () => void;
   private _onload: ((...args: any[]) => void);
   private _onerror: ((...args: any[]) => void);
   [key: string]: any;
@@ -70,12 +70,8 @@ export class Image {
 
   set onload (callback: ((...args: any[]) => void)) {
     this._onload = callback
-    if (this._loadListener) {
-      this.canvas.removeMessageListener(this._loadListener)
-    }
-    if (callback) {
-      this._loadListener = this.addEventListener('load', callback)
-    }
+    this._removeLoadListener?.()
+    this._removeLoadListener = callback ? this.addEventListener('load', callback) : undefined
   }
 
   get onload (): ((...args: any[]) => void) {
@@ -84,12 +80,8 @@ export class Image {
 
   set onerror (callback: ((...args: any[]) => void)) {
     this._onerror = callback
-    if (this._errorListener) {
-      this.canvas.removeMessageListener(this._errorListener)
-    }
-    if (callback) {
-      this._errorListener = this.addEventListener('error', callback)
-    }
+    this._removeErrorListener?.()
+    this._removeErrorListener = callback ? this.addEventListener('error', callback) : undefined
   }
 
   get onerror () : ((...args: any[]) => void) {

packages/webpack-plugin/lib/runtime/components/react/mpx-canvas/index.tsx

@@ -200,7 +200,10 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
   }
 
   const removeMessageListener = (listener: any) => {
-    canvasRef.current.listeners.splice(canvasRef.current.listeners.indexOf(listener), 1)
+    const index = canvasRef.current.listeners.indexOf(listener)
+    if (index > -1) {
+      canvasRef.current.listeners.splice(index, 1)
+    }
   }
 
   const onMessage = useCallback((e: { nativeEvent: { data: string } }) => {
@@ -288,22 +291,22 @@ const _Canvas = forwardRef<HandlerRef<CanvasProps & View, CanvasProps>, CanvasPr
         allowUniversalAccessFromFileURLs: true
       })
     )
+  } else {
+    canvasComponent = createElement(View, innerProps, createElement(WebView, {
+      ref: (element: WebViewInstance | null) => {
+        if (canvasRef.current) {
+          canvasRef.current.webview = element
+        }
+      },
+      style: [stylesheet.webview, { height, width }],
+      source: { html },
+      originWhitelist: originWhitelist,
+      onMessage: onMessage,
+      onLoad: onLoad,
+      scrollEnabled: false
+    }))
   }
 
-  canvasComponent = createElement(View, innerProps, createElement(WebView, {
-    ref: (element: WebViewInstance | null) => {
-      if (canvasRef.current) {
-        canvasRef.current.webview = element
-      }
-    },
-    style: [stylesheet.webview, { height, width }],
-    source: { html },
-    originWhitelist: originWhitelist,
-    onMessage: onMessage,
-    onLoad: onLoad,
-    scrollEnabled: false
-  }))
-
   if (hasPositionFixed) {
     canvasComponent = createElement(Portal, null, canvasComponent)
   }

packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox-group.tsx

@@ -138,7 +138,7 @@ const CheckboxGroup = forwardRef<
       bindchange &&
         bindchange(
           getCustomEvent(
-            'tap',
+            'change',
             evt,
             {
               layoutRef,

packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx

@@ -23,7 +23,7 @@ interface FormProps {
       value: any
     }
   }) => void
-  bindreset?: () => void
+  bindreset?: (evt: Record<string, any>) => void
 }
 
 const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: FormProps, ref): JSX.Element => {
@@ -98,7 +98,7 @@ const _Form = forwardRef<HandlerRef<View, FormProps>, FormProps>((fromProps: For
 
     const reset = () => {
       const { bindreset } = propsRef.current
-      bindreset && bindreset()
+      bindreset && bindreset(getCustomEvent('reset', {}, { layoutRef }, propsRef.current))
       formValuesMap.forEach(item => item.resetValue())
     }
     return {

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/date.tsx

@@ -121,7 +121,7 @@ const valueChanged2Obj = (currentObj: FormatObj, value: number[], limit = 3) =>
   const rangeArr = currentObj.rangeArr
 
   if (limit === 3 && (currentValue[0] !== value[0] || currentValue[1] !== value[1])) {
-    const days = daysInMonth(value[0], value[1] + 1)
+    const days = daysInMonth(value[0] + START_YEAR, value[1] + 1)
     rangeArr[2] = days
     const maxIndex = days.length - 1
     if (value[2] > maxIndex) {

packages/webpack-plugin/lib/runtime/components/react/mpx-picker/index.tsx

@@ -250,7 +250,7 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
     }
 
     const onCancel = () => {
-      bindcancel?.()
+      bindcancel?.(getCustomEvent('cancel', {}, { layoutRef }, props))
       hide()
     }
 

packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx

@@ -118,7 +118,7 @@ const radioGroup = forwardRef<
       bindchange &&
         bindchange(
           getCustomEvent(
-            'tap',
+            'change',
             evt,
             {
               layoutRef,

packages/webpack-plugin/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -57,7 +57,7 @@ const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHead
   const headerTopRef = useRef(0)
 
   useEffect(() => {
-    registerStickyHeader({ key: id, updatePosition })
+    registerStickyHeader({ id, updatePosition })
     return () => {
       unregisterStickyHeader(id)
     }