无法从'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
}

下面是我在测试文件夹中的jest测试，名为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';