Using "@vue/vue-jest@28", I am standing up unit tests on an existing project which uses pug with SFCs. Mostly this was smooth until I hit a cryptic jest failure, which reports
[vue-jest] Error: Vue template compilation failed
at <snip>
at ScriptTransformer.transform
The root cause seems to be that the pug preprocessor (perhaps there are many, my deps say I'm using "pug" ^3.0.2) needs to have its doctype option set to to "html", otherwise it will emit transformations with mirrored "bare" (?) attributes, like the following
// pug
div
div(v-if="foo")
div(v-else)
// html
<div>
<div v-if="foo"></div>
<div v-else="v-else"></div> <!-- oops -->
</div>
The solution was to set jestConfig.globals["vue-jest"].pug.doctype = "html"
To save future users some heartache, I suggest this option be documented in the readme as a hint for setting up pug, and maybe it can even be defaulted. If I'm overlooking that it's already documented, then my apologies!
Using "@vue/vue-jest@28", I am standing up unit tests on an existing project which uses pug with SFCs. Mostly this was smooth until I hit a cryptic jest failure, which reports
The root cause seems to be that the pug preprocessor (perhaps there are many, my deps say I'm using "pug" ^3.0.2) needs to have its doctype option set to to
"html", otherwise it will emit transformations with mirrored "bare" (?) attributes, like the followingThe solution was to set
jestConfig.globals["vue-jest"].pug.doctype = "html"To save future users some heartache, I suggest this option be documented in the readme as a hint for setting up pug, and maybe it can even be defaulted. If I'm overlooking that it's already documented, then my apologies!
related:
378
similar issue on another repo (parcel-bundler) relevant code in pug code-gen