Explorar o código

📝 docs(story): 更新UI包创建指南,细化Jest配置和导出规范

- 更新任务3标题,明确包含package.json和Jest配置
- 在任务2中,为`src/index.ts`文件添加具体内容说明,强调其应保持为空并包含注释
- 在任务3中,为Taro依赖添加具体版本号
- 在任务3中,细化测试相关依赖,明确添加`@d8d/mini-testing-utils`工作区包
- 在任务3中,新增任务3.7,添加完整的`jest.config.cjs`配置文件示例
- 在技术栈部分,更新测试框架说明,明确Jest版本并新增`@d8d/mini-testing-utils`包
- 在目录结构部分,更新`src/index.ts`的说明,强调其保持为空
- 新增“src/index.ts规范”小节,提供具体文件内容示例
- 新增“Jest配置规范”小节,提供完整的`jest.config.cjs`配置示例和关键配置说明
- 重新编号后续规范小节(RPC客户端、类型定义等)
- 在参考实现部分,为`yongren-statistics-ui`补充主入口文件说明,为`yongren-dashboard-ui`补充Jest配置说明
yourname hai 3 semanas
pai
achega
d2ce4387b9
Modificáronse 1 ficheiros con 102 adicións e 14 borrados
  1. 102 14
      docs/stories/017.001.story.md

+ 102 - 14
docs/stories/017.001.story.md

@@ -100,10 +100,15 @@
   - `src/components/` - UI组件
   - `src/types/` - TypeScript类型定义
   - `src/utils/` - 工具函数
-  - `src/index.ts` - 包主入口
+  - `src/index.ts` - 包主入口 (保持为空,仅包含注释)
   - `tests/` - 测试文件
+- [ ] 2.3 创建`src/index.ts`文件,内容为:
+  ```typescript
+  // 采用细粒度路径导出方式
+  // 不再导出任何内容,所有工具和组件通过具体路径导入
+  ```
 
-### 任务3: 配置每个UI包的package.json (AC: package.json配置)
+### 任务3: 配置每个UI包的package.json和Jest配置 (AC: package.json配置)
 - [ ] 3.1 参照`yongren-dashboard-ui/package.json`创建每个UI包的package.json
 - [ ] 3.2 配置包名称为`@d8d/rencai-<name>-ui`
 - [ ] 3.3 配置exports字段,支持以下导出路径:
@@ -115,11 +120,34 @@
   - `@d8d/rencai-shared-ui` (共享UI组件)
   - 对应的后端模块包 (如`@d8d/allin-company-module`)
 - [ ] 3.5 配置Taro相关依赖:
-  - `@tarojs/components`
-  - `@tarojs/plugin-platform-weapp`
-  - `@tarojs/react`
-  - `@tarojs/taro`
-- [ ] 3.6 配置测试框架 (Jest, 参照mini项目)
+  - `@tarojs/components`: "4.1.4"
+  - `@tarojs/plugin-platform-weapp`: "4.1.4"
+  - `@tarojs/react`: "4.1.4"
+  - `@tarojs/taro`: "4.1.4"
+- [ ] 3.6 配置测试相关依赖:
+  - devDependencies中添加: `"@d8d/mini-testing-utils": "workspace:*"`
+  - 其他测试依赖: `jest`, `ts-jest`, `@testing-library/react`, 等
+- [ ] 3.7 创建`jest.config.cjs`配置文件,参照`yongren-dashboard-ui/jest.config.cjs`:
+  ```javascript
+  module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['@d8d/mini-testing-utils/setup'],
+    moduleNameMapper: {
+      '^@/(.*)$': '<rootDir>/src/$1',
+      '^~/(.*)$': '<rootDir>/tests/$1',
+      '^@tarojs/taro$': '@d8d/mini-testing-utils/testing/taro-api-mock.ts',
+      '\\.(css|less|scss|sass)$': '@d8d/mini-testing-utils/testing/style-mock.js',
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+        '@d8d/mini-testing-utils/testing/file-mock.js'
+    },
+    testMatch: [
+      '<rootDir>/tests/**/*.spec.{ts,tsx}',
+      '<rootDir>/tests/**/*.test.{ts,tsx}'
+    ],
+    // ... 其他配置
+  }
+  ```
 
 ### 任务4: 创建API客户端 (AC: API客户端集成)
 - [ ] 4.1 为每个UI包创建`src/api/<rencai>Client.ts`
@@ -195,9 +223,10 @@
 - **Tailwind CSS**: 4.1.11 (样式)
 
 **测试框架:**
-- **Jest**: mini项目使用Jest (不是Vitest!)
-- **Testing Library**: @testing-library/react
-- **@testing-library/user-event**: 用户交互测试
+- **Jest**: 30.2.0 (mini项目使用Jest,不是Vitest!)
+- **ts-jest**: 29.4.5 (TypeScript预处理器)
+- **@testing-library/react**: 16.3.0 (React组件测试)
+- **@d8d/mini-testing-utils**: workspace包 (Taro小程序测试工具,提供统一的mock配置)
 
 **包管理:**
 - **pnpm**: workspace管理
@@ -215,7 +244,7 @@ mini-ui-packages/<package-name>/
 ├── tsconfig.json             # TypeScript配置
 ├── jest.config.cjs           # Jest测试配置
 ├── src/
-│   ├── index.ts              # 主入口文件
+│   ├── index.ts              # 主入口文件 (保持为空,采用细粒度导出)
 │   ├── api/                  # API客户端
 │   │   └── index.ts          # API导出
 │   ├── pages/                # 页面组件
@@ -228,6 +257,14 @@ mini-ui-packages/<package-name>/
 └── tests/                    # 测试文件
 ```
 
+**src/index.ts规范** (参照`yongren-statistics-ui/src/index.ts`):
+```typescript
+// 采用细粒度路径导出方式
+// 不再导出任何内容,所有工具和组件通过具体路径导入
+```
+
+**重要**: 主入口文件`src/index.ts`保持为空(仅包含注释),所有导出通过package.json的exports字段配置的具体路径进行。
+
 #### 2. package.json exports配置规范
 ```json
 {
@@ -257,7 +294,56 @@ mini-ui-packages/<package-name>/
 import LoginPage from '@d8d/rencai-auth-ui/pages/LoginPage/LoginPage'
 ```
 
-#### 3. RPC客户端实现规范
+#### 3. Jest配置规范
+每个UI包必须创建`jest.config.cjs`配置文件,参照`yongren-dashboard-ui/jest.config.cjs`:
+
+```javascript
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['@d8d/mini-testing-utils/setup'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^~/(.*)$': '<rootDir>/tests/$1',
+    '^@tarojs/taro$': '@d8d/mini-testing-utils/testing/taro-api-mock.ts',
+    '\\.(css|less|scss|sass)$': '@d8d/mini-testing-utils/testing/style-mock.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '@d8d/mini-testing-utils/testing/file-mock.js'
+  },
+  testMatch: [
+    '<rootDir>/tests/**/*.spec.{ts,tsx}',
+    '<rootDir>/tests/**/*.test.{ts,tsx}'
+  ],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+    '!src/**/index.{ts,tsx}',
+    '!src/**/*.stories.{ts,tsx}'
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/dist/',
+    '/coverage/'
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(swiper|@tarojs)/)'
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json']
+}
+```
+
+**关键配置说明**:
+- `setupFilesAfterEnv`: 使用`@d8d/mini-testing-utils/setup`进行测试环境初始化
+- `moduleNameMapper`: 映射Taro API和样式文件到mock
+- `testMatch`: 支持`.spec.{ts,tsx}`和`.test.{ts,tsx}`两种测试文件格式
+
+#### 4. RPC客户端实现规范
 每个UI包使用简单的RPC客户端导出模式 (参照`yongren-statistics-ui/src/api/enterpriseStatisticsClient.ts`):
 
 ```typescript
@@ -274,7 +360,7 @@ export const <rencai>Client = rpcClient<typeof <rencaiRoutes>>('/api/v1/rencai')
 export { <rencai>Client } from './<rencai>Client'
 ```
 
-#### 4. 类型定义规范
+#### 5. 类型定义规范
 **必须使用RPC推断类型**,避免直接导入schema类型:
 
 ```typescript
@@ -482,12 +568,14 @@ const createMockResponse = (status: number, data?: any) => ({
 #### 4. 参考实现
 - **用人方统计UI包**: `mini-ui-packages/yongren-statistics-ui`
   - API客户端: `src/api/enterpriseStatisticsClient.ts` (简单RPC客户端导出模式)
-  - 参照此文件实现rencai UI包的API客户端
+  - 主入口文件: `src/index.ts` (保持为空,采用细粒度导出)
+  - 参照此文件实现rencai UI包的API客户端和导出方式
 
 - **用人方仪表板UI包**: `mini-ui-packages/yongren-dashboard-ui`
   - 组件: `src/pages/Dashboard/Dashboard.tsx`
   - package.json exports配置
   - 目录结构参考
+  - Jest配置: `jest.config.cjs`
 
 ### 数据模型参考