如何使用React Native Testing Library测试Expo ImagePicker相关函数

问题原因 #

• 核心原因1：你对expo-image-picker的mock不完整。业务代码里调用launchImageLibraryAsync时用到了ImagePicker.MediaTypeOptions.All，但你mock返回的对象里没有定义MediaTypeOptions属性，代码执行到此处会抛出未定义错误，直接中断后续逻辑，自然不会执行launchImageLibraryAsync。
• 核心原因2：你的测试用例回调函数没有声明为async，就算你写了await waitFor也不会生效，代码会不等异步逻辑执行完成就直接走断言，自然匹配不到调用记录。

解决方案 #

1. 补全expo-image-picker的mock内容，添加用到的MediaTypeOptions属性：

jest.mock('expo-image-picker', () => {
    return {
        requestMediaLibraryPermissionsAsync: jest.fn().mockResolvedValue({
            status: 'granted'
        }), 
        launchImageLibraryAsync: jest.fn().mockResolvedValue({
          cancelled: false, type: 'image', 
          uri: 'abc.jpeg',
          width: '200',
          height: '200'
        }),
        // 新增业务代码用到的枚举值
        MediaTypeOptions: {
            All: 'All'
        }
    }
})

注：如果还用到了Images/Videos等其他枚举值，同步在MediaTypeOptions里添加即可。另外建议把mockResolvedValueOnce改成mockResolvedValue，避免单测重复调用时返回undefined。

2. 修改测试用例，给回调函数加上async声明：

// 此处添加async声明
it('should pass test case ', async () => {
   const {getByTestId} = render(<MyComponent />)
   const pickImageButton = getByTestId('add_image')

   fireEvent.press(pickImageButton)

   await waitFor(() => {
     expect(ImagePicker.requestMediaLibraryPermissionsAsync).toBeCalledTimes(1)
   })
   await waitFor(() => {
     expect(ImagePicker.launchImageLibraryAsync).toBeCalledTimes(1)
   })
   // 其余测试逻辑
})

waitFor不生效的说明 #

你之前加了waitFor还是报错，本质是没有给测试用例回调加async，await关键字在普通函数里会触发语法错误，测试执行时会直接跳过等待逻辑，在异步代码执行完成前就运行了断言。如果补全async后还有问题，可以检查控制台的报错信息，确认是否还有其他未mock的依赖属性导致代码中断。

内容的提问来源于stack exchange，提问作者ken