Description
I got a problem to use Jest to test a vue file with external template.
Looks like Jest didn't recognize the "@" as the setting
I've add the moduleNameMapper in jest.config.js
it works in the testing file (xxx.spec.js) (cause it can locate the vue file) , but didn't work in vue file (cause it can't locate the html file)
Please help me to point out the wrong place I've made , I'll be appreciated.
Here's the error messages :
PS C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev> npm run test:unit
> athenaPC@1.0.354 test:unit C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev
> vue-cli-service test:unit
FAIL tests/unit/example.spec.js
● Test suite failed to run
ENOENT: no such file or directory, open 'C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev\src\js\static\js\test\test.html'
at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:63:35)
at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
Test Suites: 1 failed, 1 total
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! athenaPC@1.0.354 test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the athenaPC@1.0.354 test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here's my file structure
src
|__ js
| |__ test.vue
|
static
|__ js
|__ test
|__ test.html
Here's my jest.config.js settings :
is at C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
},
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue",
"ts",
"tsx",
"node",
],
}
Here's my testing vue file with external template (path of vue file is at //src/js/test.vue ) :
<template src="@/../static/js/test/test.html"></template>
<script>
export default {
name: "test",
data() {
return {
greeting: "Vue and TDD"
}
}
}
</script>
Here's my testing file (xxx.spec.js)
import { shallowMount } from '@vue/test-utils'
import Test from '@/js/test.vue'
describe('test.vue', () => {
it('renders props.msg when passed', () => {
const wrapper = shallowMount(Test)
expect(wrapper.html().includes("Vue and TDD")).toBe(true)
})
})
The content of HTML file is like (path of HTML is at //static/js/test/test.html ) :
<div>
{{ greeting }}
</div>