无法从“test/banner.test.js”中找到模块“components/layouts/default/Banner”

Question

我正在尝试让 Jest 与我的 Nuxt 项目一起工作，并且我已经对其进行了设置，以便它可以正常运行测试，但是当我的组件位于子文件夹（或更深）中时，我收到以下错误。

Cannot find module 'components/layouts/default/Banner' from 'test/banner.test.js'

我怀疑这与我配置 Jest 的方式有关，但因为我对 Jets 相当陌生，所以我不知道那是什么。这是我的 jest.config 文件

module.exports = {
  setupFiles: ['<rootDir'>/jest.setup.js'], 
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  }, 
  moduleFileExtensions: ['js', 'vue', 'json'], 
  testPathIgnorePatterns: ['/dist/', '/node_modules/'], 
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  }
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vuetify)'], 
  collectCoverage: true, 
  collectCoverageFrom: [
    '<rootDir>/api/**/*.js',
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    '<rootDir>/store/**/*.js'
  ], 
  verbose:true
}

这是我在名为 banner.test.js 的测试文件夹中的玩笑测试

import {shallowMount} from '@vue/test-utils';
import Banner from 'components/layouts/default/Banner';

let wrapper = null;

beforeEach(()=>{
  wrapper = shallowMount(Banner, {
   propsData:{
     text: 'test text'
    }
  })
})

it('test text', ()=> {
   expect(wrapper.find('.bannerText').toBe('test text')
})

Answer 1

试试这个

import Banner from '@/components/layouts/default/Banner';