Nuxt测试中mock useStorage报错，需导入什么才能成功？

问题场景 #

我在为Nuxt应用里使用Nitro KV存储的函数编写测试时遇到了问题：客户端中useStorage()是自动导入的，按照官方文档建议尝试mock该函数，复制了以下代码片段：

mockNuxtImport('useStorage', () => {
  return () => {
    return { value: 'mocked storage' }
  }
})

但测试抛出错误：Error: Cannot find import "useStorage" to mock，想知道需要导入什么才能成功mock useStorage()？

解决方法 #

• 首先确保在测试文件顶部导入mockNuxtImport函数，它来自Nuxt的测试工具包：

import { mockNuxtImport } from '@nuxt/test-utils/runtime'

• 如果是Nuxt 3.8及以上版本，useStorage的归属模块有调整，mock时可以指定它的实际来源模块nuxt/app：

mockNuxtImport('useStorage', () => {
  return () => ({ value: 'mocked storage' })
}, { module: 'nuxt/app' })

• 同时要确认测试环境已经正确初始化Nuxt测试上下文，比如在测试用例中使用setup()函数准备测试环境，确保Nuxt的自动导入机制能被测试工具正确识别。

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