♻️ refactor(profile): 优化个人中心页面代码结构

- 移除自定义showToast工具函数，统一使用Taro.showToast
- 为所有交互按钮添加testId属性，提升测试可访问性
- 重构客服功能调用方式，优化错误处理流程

✅ test(profile): 完善个人中心页面测试用例

- 创建统一的Taro API mock文件，集中管理测试依赖
- 更新测试用例以使用新的testId选择器
- 优化测试断言，确保与重构后的代码行为一致
- 跳过暂时被注释的退出登录相关测试

📦 build(jest): 配置Jest模块映射

- 添加@tarojs/taro的模块映射，指向测试mock文件
- 统一管理测试环境中的第三方依赖模拟

mini/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
+    '^@tarojs/taro$': '<rootDir>/tests/__mocks__/taroMock.ts',
     '\.(css|less|scss|sass)$': '<rootDir>/tests/__mocks__/styleMock.js',
     '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/tests/__mocks__/fileMock.js'

mini/src/pages/profile/index.tsx

@@ -9,7 +9,6 @@ import { Navbar } from '@/components/ui/navbar'
 import { AvatarUpload } from '@/components/ui/avatar-upload'
 import { type UploadResult } from '@/utils/minio'
 import './index.css'
-import { showToast } from '@/utils/toast'
 
 const ProfilePage: React.FC = () => {
   const { user: userProfile, logout, isLoading: loading, updateUser } = useAuth()
@@ -25,7 +24,7 @@ const ProfilePage: React.FC = () => {
             Taro.showLoading({ title: '退出中...' })
             await logout()
             Taro.hideLoading()
-            showToast({
+            Taro.showToast({
               title: '已退出登录',
               icon: 'success',
               duration: 1500
@@ -38,7 +37,7 @@ const ProfilePage: React.FC = () => {
       })
     } catch (error) {
       Taro.hideLoading()
-      showToast({
+      Taro.showToast({
         title: '退出失败，请重试',
         icon: 'none'
       })
@@ -64,14 +63,14 @@ const ProfilePage: React.FC = () => {
       }
         
         Taro.hideLoading()
-        showToast({
+        Taro.showToast({
           title: '头像更新成功',
           icon: 'success'
         })
     } catch (error) {
       console.error('更新头像失败:', error)
       Taro.hideLoading()
-      showToast({
+      Taro.showToast({
         title: '更新头像失败',
         icon: 'none'
       })
@@ -82,21 +81,21 @@ const ProfilePage: React.FC = () => {
 
   const handleAvatarUploadError = (error: Error) => {
     console.error('头像上传失败:', error)
-    showToast({
+    Taro.showToast({
       title: '上传失败，请重试',
       icon: 'none'
     })
   }
 
   const handleEditProfile = () => {
-    showToast({
+    Taro.showToast({
       title: '功能开发中...',
       icon: 'none'
     })
   }
 
   const handleSettings = () => {
-    showToast({
+    Taro.showToast({
       title: '功能开发中...',
       icon: 'none'
     })
@@ -107,7 +106,7 @@ const ProfilePage: React.FC = () => {
     const corpId = process.env.TARO_APP_WX_CORP_ID
 
     if (!kefuUrl || !corpId) {
-      showToast({
+      Taro.showToast({
         title: '客服功能配置错误',
         icon: 'none'
       })
@@ -125,7 +124,7 @@ const ProfilePage: React.FC = () => {
         },
         fail: (error) => {
           console.error('客服聊天打开失败:', error)
-          showToast({
+          Taro.showToast({
             title: '客服功能暂不可用，请稍后重试',
             icon: 'none'
           })
@@ -133,7 +132,7 @@ const ProfilePage: React.FC = () => {
       })
     } catch (error) {
       console.error('客服功能异常:', error)
-      showToast({
+      Taro.showToast({
         title: '客服功能异常，请稍后重试',
         icon: 'none'
       })
@@ -145,31 +144,36 @@ const ProfilePage: React.FC = () => {
       icon: 'i-heroicons-user-circle-20-solid',
       title: '编辑资料',
       onClick: handleEditProfile,
-      color: 'text-blue-500'
+      color: 'text-blue-500',
+      testId: 'edit-profile-button'
     },
     {
       icon: 'i-heroicons-users-20-solid',
       title: '乘车人管理',
       onClick: () => Taro.navigateTo({ url: '/pages/passengers/passengers' }),
-      color: 'text-orange-500'
+      color: 'text-orange-500',
+      testId: 'passengers-button'
     },
     {
       icon: 'i-heroicons-cog-6-tooth-20-solid',
       title: '设置',
       onClick: handleSettings,
-      color: 'text-gray-500'
+      color: 'text-gray-500',
+      testId: 'settings-button'
     },
     {
       icon: 'i-heroicons-shield-check-20-solid',
       title: '隐私政策',
-      onClick: () => showToast({ title: '功能开发中...', icon: 'none' }),
-      color: 'text-green-500'
+      onClick: () => Taro.showToast({ title: '功能开发中...', icon: 'none' }),
+      color: 'text-green-500',
+      testId: 'privacy-button'
     },
     {
       icon: 'i-heroicons-question-mark-circle-20-solid',
       title: '帮助与反馈',
-      onClick: () => showToast({ title: '功能开发中...', icon: 'none' }),
-      color: 'text-purple-500'
+      onClick: () => Taro.showToast({ title: '功能开发中...', icon: 'none' }),
+      color: 'text-purple-500',
+      testId: 'help-button'
     }
   ]
 
@@ -246,7 +250,7 @@ const ProfilePage: React.FC = () => {
         <View className="m-[24rpx_32rpx] hidden">
           <View
             className="bg-gradient-to-br from-[#667eea] to-[#764ba2] rounded-[20rpx] p-[24rpx] text-white shadow-[0_6rpx_24rpx_rgba(102,126,234,0.3)]"
-            onClick={() => showToast({ title: '会员功能开发中...', icon: 'none' })}
+            onClick={() => Taro.showToast({ title: '会员功能开发中...', icon: 'none' })}
           >
             <View className="flex justify-between items-center mb-[20rpx]">
               <View className="flex items-center">
@@ -291,6 +295,7 @@ const ProfilePage: React.FC = () => {
                 key={index}
                 className="flex items-center p-[28rpx_32rpx] border-b-2 border-[#E5E5EA] active:bg-[#F8F9FA] transition-colors duration-300"
                 onClick={item.onClick}
+                data-testid={item.testId}
               >
                 <View className={cn("w-6 h-6 mr-3", item.color, item.icon)} />
                 <View className="flex-1 ml-0">
@@ -314,14 +319,15 @@ const ProfilePage: React.FC = () => {
           <Text className="text-[30rpx] font-bold text-[#333] mb-[20rpx]">客服与帮助</Text>
           <View className="bg-white rounded-[20rpx] shadow-[0_4rpx_20rpx_rgba(0,0,0,0.08)] border border-[#E5E5EA] overflow-hidden">
             {[
-              { title: '联系客服', desc: '7x24小时在线客服', icon: 'i-heroicons-phone-20-solid', color: 'text-blue-500', onClick: handleCustomerService },
-              { title: '常见问题', desc: '查看常见问题解答', icon: 'i-heroicons-question-mark-circle-20-solid', color: 'text-green-500', onClick: () => showToast({ title: '常见问题功能开发中...', icon: 'none' }) },
-              { title: '意见反馈', desc: '提出宝贵意见', icon: 'i-heroicons-chat-bubble-left-ellipsis-20-solid', color: 'text-orange-500', onClick: () => showToast({ title: '意见反馈功能开发中...', icon: 'none' }) }
+              { title: '联系客服', desc: '7x24小时在线客服', icon: 'i-heroicons-phone-20-solid', color: 'text-blue-500', onClick: handleCustomerService, testId: 'customer-service-button' },
+              { title: '常见问题', desc: '查看常见问题解答', icon: 'i-heroicons-question-mark-circle-20-solid', color: 'text-green-500', onClick: () => Taro.showToast({ title: '常见问题功能开发中...', icon: 'none' }), testId: 'faq-button' },
+              { title: '意见反馈', desc: '提出宝贵意见', icon: 'i-heroicons-chat-bubble-left-ellipsis-20-solid', color: 'text-orange-500', onClick: () => Taro.showToast({ title: '意见反馈功能开发中...', icon: 'none' }), testId: 'feedback-button' }
             ].map((item, index) => (
               <View
                 key={index}
                 className="flex items-center p-[28rpx_32rpx] border-b-2 border-[#E5E5EA] active:bg-[#F8F9FA] transition-colors duration-300"
                 onClick={item.onClick}
+                data-testid={item.testId}
               >
                 <View className={cn("w-6 h-6 mr-3", item.color, item.icon)} />
                 <View className="flex-1 ml-0">

mini/tests/__mocks__/taroMock.ts

@@ -0,0 +1,42 @@
+/**
+ * Taro API Mock 文件
+ * 通过 jest.config.js 的 moduleNameMapper 重定向 @tarojs/taro 到这里
+ */
+
+// 创建所有 Taro API 的 mock 函数
+export const mockShowToast = jest.fn()
+export const mockShowLoading = jest.fn()
+export const mockHideLoading = jest.fn()
+export const mockNavigateTo = jest.fn()
+export const mockShowModal = jest.fn()
+export const mockReLaunch = jest.fn()
+export const mockOpenCustomerServiceChat = jest.fn()
+
+// 导出所有 mock 函数，便于在测试中访问
+export default {
+  // UI 相关
+  showToast: mockShowToast,
+  showLoading: mockShowLoading,
+  hideLoading: mockHideLoading,
+  showModal: mockShowModal,
+
+  // 导航相关
+  navigateTo: mockNavigateTo,
+  reLaunch: mockReLaunch,
+
+  // 微信相关
+  openCustomerServiceChat: mockOpenCustomerServiceChat,
+
+  // 系统信息
+  getSystemInfoSync: () => ({
+    statusBarHeight: 20
+  }),
+  getMenuButtonBoundingClientRect: () => ({
+    width: 87,
+    height: 32,
+    top: 48,
+    right: 314,
+    bottom: 80,
+    left: 227
+  })
+}

mini/tests/pages/profile.test.tsx

@@ -8,35 +8,8 @@ import '@testing-library/jest-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import ProfilePage from '../../src/pages/profile/index'
 
-// Mock Taro相关API
-const mockShowToast = jest.fn()
-const mockShowLoading = jest.fn()
-const mockHideLoading = jest.fn()
-const mockShowModal = jest.fn()
-const mockNavigateTo = jest.fn()
-const mockReLaunch = jest.fn()
-const mockOpenCustomerServiceChat = jest.fn()
-
-jest.mock('@tarojs/taro', () => ({
-  showToast: mockShowToast,
-  showLoading: mockShowLoading,
-  hideLoading: mockHideLoading,
-  showModal: mockShowModal,
-  navigateTo: mockNavigateTo,
-  reLaunch: mockReLaunch,
-  openCustomerServiceChat: mockOpenCustomerServiceChat,
-  getSystemInfoSync: () => ({
-    statusBarHeight: 20
-  }),
-  getMenuButtonBoundingClientRect: () => ({
-    width: 87,
-    height: 32,
-    top: 48,
-    right: 314,
-    bottom: 80,
-    left: 227
-  })
-}))
+// 导入 Taro mock 函数
+import taroMock from '../../tests/__mocks__/taroMock'
 
 // Mock TabBarLayout 组件
 jest.mock('@/layouts/tab-bar-layout', () => ({
@@ -189,6 +162,15 @@ describe('个人中心页面测试', () => {
       mutateAsync: options.mutationFn,
       isPending: false
     }))
+
+    // 重置所有 mock 调用记录
+    taroMock.showToast.mockClear()
+    taroMock.openCustomerServiceChat.mockClear()
+    taroMock.navigateTo.mockClear()
+    taroMock.showLoading.mockClear()
+    taroMock.hideLoading.mockClear()
+    taroMock.showModal.mockClear()
+    taroMock.reLaunch.mockClear()
   })
 
   test('应该正确渲染个人中心页面', () => {
@@ -225,7 +207,7 @@ describe('个人中心页面测试', () => {
   })
 
   test('应该处理联系客服功能 - 成功场景', async () => {
-    mockOpenCustomerServiceChat.mockImplementation((options) => {
+    taroMock.openCustomerServiceChat.mockImplementation((options) => {
       options.success()
     })
 
@@ -236,12 +218,12 @@ describe('个人中心页面测试', () => {
     )
 
     // 点击联系客服按钮
-    const customerServiceButton = screen.getByText('联系客服')
+    const customerServiceButton = screen.getByTestId('customer-service-button')
     fireEvent.click(customerServiceButton)
 
     // 检查微信客服API被正确调用
     await waitFor(() => {
-      expect(mockOpenCustomerServiceChat).toHaveBeenCalledWith({
+      expect(taroMock.openCustomerServiceChat).toHaveBeenCalledWith({
         extInfo: {
           url: 'https://work.weixin.qq.com/kfid/kfc5f4d729bc3c893d7'
         },
@@ -253,7 +235,7 @@ describe('个人中心页面测试', () => {
   })
 
   test('应该处理联系客服功能 - 失败场景', async () => {
-    mockOpenCustomerServiceChat.mockImplementation((options) => {
+    taroMock.openCustomerServiceChat.mockImplementation((options) => {
       options.fail({ errMsg: '客服功能不可用' })
     })
 
@@ -264,12 +246,12 @@ describe('个人中心页面测试', () => {
     )
 
     // 点击联系客服按钮
-    const customerServiceButton = screen.getByText('联系客服')
+    const customerServiceButton = screen.getByTestId('customer-service-button')
     fireEvent.click(customerServiceButton)
 
     // 检查错误提示显示
     await waitFor(() => {
-      expect(mockShowToast).toHaveBeenCalledWith({
+      expect(taroMock.showToast).toHaveBeenCalledWith({
         title: '客服功能暂不可用，请稍后重试',
         icon: 'none'
       })
@@ -277,7 +259,7 @@ describe('个人中心页面测试', () => {
   })
 
   test('应该处理联系客服功能 - 异常场景', async () => {
-    mockOpenCustomerServiceChat.mockImplementation(() => {
+    taroMock.openCustomerServiceChat.mockImplementation(() => {
       throw new Error('API调用异常')
     })
 
@@ -288,12 +270,12 @@ describe('个人中心页面测试', () => {
     )
 
     // 点击联系客服按钮
-    const customerServiceButton = screen.getByText('联系客服')
+    const customerServiceButton = screen.getByTestId('customer-service-button')
     fireEvent.click(customerServiceButton)
 
     // 检查异常处理
     await waitFor(() => {
-      expect(mockShowToast).toHaveBeenCalledWith({
+      expect(taroMock.showToast).toHaveBeenCalledWith({
         title: '客服功能异常，请稍后重试',
         icon: 'none'
       })
@@ -308,40 +290,40 @@ describe('个人中心页面测试', () => {
     )
 
     // 点击编辑资料按钮
-    const editProfileButton = screen.getByText('编辑资料')
+    const editProfileButton = screen.getByTestId('edit-profile-button')
     fireEvent.click(editProfileButton)
-    expect(mockShowToast).toHaveBeenCalledWith({
+    expect(taroMock.showToast).toHaveBeenCalledWith({
       title: '功能开发中...',
       icon: 'none'
     })
 
     // 点击乘车人管理按钮
-    const passengersButton = screen.getByText('乘车人管理')
+    const passengersButton = screen.getByTestId('passengers-button')
     fireEvent.click(passengersButton)
-    expect(mockNavigateTo).toHaveBeenCalledWith({
+    expect(taroMock.navigateTo).toHaveBeenCalledWith({
       url: '/pages/passengers/passengers'
     })
 
     // 点击设置按钮
-    const settingsButton = screen.getByText('设置')
+    const settingsButton = screen.getByTestId('settings-button')
     fireEvent.click(settingsButton)
-    expect(mockShowToast).toHaveBeenCalledWith({
+    expect(taroMock.showToast).toHaveBeenCalledWith({
       title: '功能开发中...',
       icon: 'none'
     })
 
     // 点击常见问题按钮
-    const faqButton = screen.getByText('常见问题')
+    const faqButton = screen.getByTestId('faq-button')
     fireEvent.click(faqButton)
-    expect(mockShowToast).toHaveBeenCalledWith({
+    expect(taroMock.showToast).toHaveBeenCalledWith({
       title: '常见问题功能开发中...',
       icon: 'none'
     })
 
     // 点击意见反馈按钮
-    const feedbackButton = screen.getByText('意见反馈')
+    const feedbackButton = screen.getByTestId('feedback-button')
     fireEvent.click(feedbackButton)
-    expect(mockShowToast).toHaveBeenCalledWith({
+    expect(taroMock.showToast).toHaveBeenCalledWith({
       title: '意见反馈功能开发中...',
       icon: 'none'
     })
@@ -360,9 +342,9 @@ describe('个人中心页面测试', () => {
 
     // 检查上传成功处理
     await waitFor(() => {
-      expect(mockShowLoading).toHaveBeenCalledWith({ title: '更新头像...' })
-      expect(mockHideLoading).toHaveBeenCalled()
-      expect(mockShowToast).toHaveBeenCalledWith({
+      expect(taroMock.showLoading).toHaveBeenCalledWith({ title: '更新头像...' })
+      expect(taroMock.hideLoading).toHaveBeenCalled()
+      expect(taroMock.showToast).toHaveBeenCalledWith({
         title: '头像更新成功',
         icon: 'success'
       })
@@ -386,15 +368,16 @@ describe('个人中心页面测试', () => {
 
     // 检查上传失败处理
     await waitFor(() => {
-      expect(mockShowToast).toHaveBeenCalledWith({
+      expect(taroMock.showToast).toHaveBeenCalledWith({
         title: '上传失败，请重试',
         icon: 'none'
       })
     })
   })
 
-  test('应该处理退出登录', async () => {
-    mockShowModal.mockImplementation((options) => {
+  // 退出登录功能暂时被注释掉，跳过相关测试
+  test.skip('应该处理退出登录', async () => {
+    taroMock.showModal.mockImplementation((options) => {
       options.success({ confirm: true })
     })
 
@@ -410,15 +393,15 @@ describe('个人中心页面测试', () => {
 
     // 检查退出登录流程
     await waitFor(() => {
-      expect(mockShowModal).toHaveBeenCalledWith({
+      expect(taroMock.showModal).toHaveBeenCalledWith({
         title: '退出登录',
         content: '确定要退出登录吗？',
         success: expect.any(Function)
       })
-      expect(mockShowLoading).toHaveBeenCalledWith({ title: '退出中...' })
+      expect(taroMock.showLoading).toHaveBeenCalledWith({ title: '退出中...' })
       expect(mockLogout).toHaveBeenCalled()
-      expect(mockHideLoading).toHaveBeenCalled()
-      expect(mockShowToast).toHaveBeenCalledWith({
+      expect(taroMock.hideLoading).toHaveBeenCalled()
+      expect(taroMock.showToast).toHaveBeenCalledWith({
         title: '已退出登录',
         icon: 'success',
         duration: 1500
@@ -426,8 +409,8 @@ describe('个人中心页面测试', () => {
     })
   })
 
-  test('应该处理退出登录取消', async () => {
-    mockShowModal.mockImplementation((options) => {
+  test.skip('应该处理退出登录取消', async () => {
+    taroMock.showModal.mockImplementation((options) => {
       options.success({ confirm: false })
     })
 
@@ -443,7 +426,7 @@ describe('个人中心页面测试', () => {
 
     // 检查取消退出登录
     await waitFor(() => {
-      expect(mockShowModal).toHaveBeenCalled()
+      expect(taroMock.showModal).toHaveBeenCalled()
       expect(mockLogout).not.toHaveBeenCalled()
     })
   })