如何使用Jest正确mock react-native-base64库完成React代码测试

首先说明你之前两种写法失效的核心原因：

1. 直接修改导入的base64.decode会失败，是因为ES模块的默认导入是只读属性，运行时直接赋值不会生效还可能触发报错
2. 第二种jest.mock返回了一个空函数，而原库的默认导出是带有decode方法的对象，结构不匹配自然调用不到对应方法

解决方法 #

方案1：单测试文件局部mock #

在测试文件最顶部（所有业务代码导入之前）编写mock逻辑，保证测试文件导入业务代码时，拿到的就是已经mock过的库：

// 必须写在所有import语句之前
jest.mock('react-native-base64', () => ({
  __esModule: true,
  default: {
    decode: jest.fn(() => 'testParsedValue')
  }
}))

// 之后再导入依赖
import YourTestComponent from './你的组件路径'
import base64 from 'react-native-base64'

测试用例可以直接调用mock方法做断言，也可以动态修改返回值适配不同场景：

test('验证接口返回值解码逻辑正常', async () => {
  // 单独设置本次测试的解码返回值
  base64.decode.mockReturnValueOnce('自定义的解码结果')
  // 渲染组件
  render(<YourTestComponent />)
  // 等待useEffect中的异步方法执行完成
  await waitFor(() => {
    // 断言decode方法被正确调用
    expect(base64.decode).toHaveBeenCalledWith('你mock的后端接口返回的base64字符串')
    // 其他业务逻辑断言
  })
})

方案2：全局复用mock #

如果有多个测试文件都需要用到这个库的mock，可以创建全局mock减少重复代码：

1. 在Jest配置的根目录下新建__mocks__/react-native-base64.js文件，写入：

export default {
  decode: jest.fn(() => '默认解码返回值')
}

2. 在需要使用mock的测试文件顶部加一行jest.mock('react-native-base64')即可自动引入全局mock实现。

注意事项 #

如果用TypeScript开发，需要对mock方法做类型断言避免类型报错：

const mockedDecode = base64.decode as jest.Mock

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