Nuxt项目使用Jest测试时无法找到子目录下组件报错如何解决？

问题原因 #

该报错由Jest路径解析规则不匹配导致：你当前的jest.config.js中仅配置了@/、~/两个根路径别名的映射规则，但测试文件内采用了components/layouts/default/Banner这类直接以根目录下文件夹名开头的导入写法，Jest无法识别components对应的实际文件路径，只会从测试文件所在的test目录逐层向上查找目标文件，最终查找失败抛出报错。

解决方案 #

有两种可选方案，按需选择即可：

方案一：修改导入语句（无需改动配置） #

遵循Nuxt项目通用的导入规范，给路径加上已配置的别名前缀即可，把测试文件内的导入语句修改为：

// 二选一即可，二者在你的配置中映射规则完全一致
import Banner from '~/components/layouts/default/Banner'
import Banner from '@/components/layouts/default/Banner'

方案二：新增Jest路径映射规则（无需改动现有导入写法） #

如果不想批量修改所有测试文件的导入语句，可以直接在jest.config.js的moduleNameMapper节点下新增对应目录的映射规则：

module.exports = {
  // 其余原有配置保持不变
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    // 新增根目录下常用文件夹的路径映射
    '^components/(.*)$': '<rootDir>/components/$1',
    '^pages/(.*)$': '<rootDir>/pages/$1',
    '^store/(.*)$': '<rootDir>/store/$1',
    '^api/(.*)$': '<rootDir>/api/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  // 其余原有配置保持不变
}

额外注意 #

你当前的测试代码存在断言逻辑错误：wrapper.find('.bannerText')返回的是DOM元素的包裹实例，需要调用.text()方法才能拿到元素内的文本内容，修正后的断言语句如下：

expect(wrapper.find('.bannerText').text()).toBe('test text')

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