配置错误:使用vue-test-utils和jes运行单元测试时无法定位模块

Question

在使用jest和vue-test-util进行单元测试时遇到了这个配置错误。具体来说，我总共测试了4个Vue组件。其他3个会通过得很好，但是当运行第四个的测试时，我遇到了一个不被测试Vue组件使用的文件的配置问题:

终端错误:

FAIL  tests/unit/panels/EditorContextPanel.spec.ts
● Test suite failed to run
Configuration error:
Could not locate module @/lib-components/assets/svg/Icons mapped as:
C:UsersnnguyenDocumentsNPM.AdvancedEditor.Componentssrc$1.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^@/(.*)$/": "C:UsersnnguyenDocumentsNPM.AdvancedEditor.Componentssrc$1"
},
"resolver": undefined
}
1 | import { API, BlockAPI, BlockTool, BlockToolData } from '@ado/editorjs'
> 2 | import Icons from '@/lib-components/assets/svg/Icons'
| ^
3 | import './styles/TableBlock.css'
4 | import { defaultSanitizerConfig } from './configs/sanitizerConfig'
5 |
at createNoMappedModuleFoundError (node_modules/jest-resolve/build/resolver.js:579:17)
at Object.<anonymous> (src/lib-components/editor/BlockTools/TableBlock.ts:2:1)
Test Suites: 1 failed, 4 passed, 5 total
Tests:       10 passed, 10 total
Snapshots:   0 total
Time:        11.308 s
Ran all test suites.

遇到这个问题的测试文件:

import { shallowMount } from '@vue/test-utils'
import EditorContextPanel from '@/lib-components/panels/EditorContextPanel.vue'
import { createTestingPinia } from '@pinia/testing'
import { useApplicationStateStore } from '@/lib-components/stores/applicationStateStore'
describe('ContentToolsPanel', () => {
it('panel visible when set', () => {
const wrapper = shallowMount(EditorContextPanel, {
global: {
plugins: [createTestingPinia()],
},
})
const store = useApplicationStateStore()
store.showEditorContextButtons = false
expect(wrapper.find('[data-testid=editor-context-button]').isVisible).toBe(false)
store.showEditorContextButtons = true
expect(wrapper.find('[data-testid=editor-context-button]').isVisible).toBe(true)
})
})

在终端错误中显示的图标文件:

const Icons = {
toolbarIcons: {
bold: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="b" d="M13.6854,9.76a4.1607,4.1607,0,0,0,1.886-3.189A4.506,4.506,0,0,0,11.1314,2q-.066-.0009-.132,0H3.8564V18h8.046a4.334,4.334,0,0,0,1.783-8.24Zm-6.4-4.9h3.429a1.7145,1.7145,0,1,1,0,3.429H7.2854Zm4,10.286h-4v-3.432h4a1.7145,1.7145,0,1,1,0,3.429Z"/></svg>',
}
};
export default Icons;

my jest config in package.json:

"jest": {
"verbose": true,
"cache": false,
"moduleFileExtensions": [
"js",
"json",
"ts",
"vue"
],
"transform": {
"^.+\.vue$": "vue3-jest",
"^.+\.(ts|tsx)$": "ts-jest",
"^.+\.(js|jsx)?$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": false,
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/mocks/fileMock.js",
"\.(css|less)$": "<rootDir>/tests/mocks/styleMock.js",
"^@/(.*)$": "<rootDir>/src/$1"
},
"collectCoverageFrom": [
"src/lib-components/**/*.{vue,ts}",
"!src/entry.esm.ts",
"!src/entry.ts",
"!**/main.ts",
"!**/index.ts",
"!**/styles/**",
"!**/stubs/**",
"!**/assets/**"
],
"snapshotSerializers": [
"jest-serializer-vue"
],
"preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
"moduleDirectories": [
"node_modules"
]
}

我对vue-cli-service test:unit --no-cache进行了测试。任何提示或见解将非常感激!

Answer 1

检查组件的导入语句是否与实际的文件/文件夹名称大小写相同

import EditorContextPanel from '@/lib-components/panels/EditorContextPanel.vue'
import { createTestingPinia } from '@pinia/testing'
import { useApplicationStateStore } from '@/lib-components/stores/applicationStateStore'