vue-jest
vue-jest copied to clipboard
vuejs
templateCompiler.compiler is ignored, cannot use vue-template-babel-compiler
In my jest.config.js (relevant bits):
const VueTemplateBabelCompiler = require('vue-template-babel-compiler');
module.exports = {
// ...
transform: {
"\\.(js|ts|jsx|tsx)$": "babel-jest",
"\\.vue$": "@vue/vue2-jest",
},
globals: {
'@vue/vue2-jest': {
templateCompiler: {
compiler: VueTemplateBabelCompiler,
}
}
}
};
Now when I start jest, it attempts to compile our templates, but fails because it's using its underpowered default compiler.
The documentation on this, unfortunately, is very unclear:
You can provide TemplateCompileOptions in
templateCompilersection
Well obvisouly not, because compiler is totally ignored. The function isn't even being called once.
To prove this:
'@vue/vue2-jest': {
templateCompiler: {
compiler: (...args) => {
console.log(args);
},
}
}
Nothing extra at all getting spewed into the console. I would expect to see at least some code it's trying to compile. But absolutely bupkiss.
Variations:
templateCompiler: (...args) => console.log(args)compiler: (...args) => console.log(args)withouttemplateCompilerwrapping it'vue2-jest'instead of'@vue/vue2-jest''vue-jest'instead of'@vue/vue2-jest'
All yield the same: it's just simply not affecting anything. It feel like a magic black box to me that I just simply can't "get to".
Anyway, then it goes on by example:
{
"jest": {
"globals": {
"@vue/vue2-jest": {
"templateCompiler": {
"transpileOptions": {
"transforms": {
"dangerousTaggedTemplateString": true
}
}
}
}
}
}
}
Where do I put this?? I'm assuming in jest.config.js, so why is it now suddenly wrapped in a jest object? So I wrapped it as well, like in the example. Now it complains the config doesn't match the expected interface:
● Validation Warning:
Unknown option "jest" with value {"globals": {"@vue/vue2-jest": {"templateCompiler": {"compiler": [Function renderCompiler]}}}} was found.
This is probably a typing mistake. Fixing it will remove this message.
Configuration Documentation:
https://jestjs.io/docs/configuration
● Validation Warning:
Unknown option "jest" with value {"globals": {"@vue/vue2-jest": {"templateCompiler": {"compiler": [Function renderCompiler]}}}} was found.
This is probably a typing mistake. Fixing it will remove this message.
Configuration Documentation:
https://jestjs.io/docs/configuration
Okay, so it can complain. So what I initially did then must be correct, or it would (or should) complain.
So then how oh good mother's Earth can I tell it to use vue-template-babel-compiler?
Here's another proof:
globals: {
'@vue/vue2-jest': {
templateCompiler: {
get compiler() {
console.log('getting compiler');
return VueTemplateBabelCompiler;
}
}
}
}
It does spew out getting compiler a dozen or so times into the console, so it is definitely reading the compiler option. It's just not using it, or so it seems.
Digging into the source, something along the way is DELETING the compiler option from the config object. Why?!
Also it searches for globals['vue-jest'] which makes the documentation as incorrect as it is confusing.
I worked around it, but I'm sorry I don't remember how. I was on the clock, and didn't have time to post my workaround.
same issue here. i tried a hacky thing and symlinked /node_modules/vue-template-es2015-compiler to the /modules/vue-template-babel-compiler directory, but it just throws an error that it cannot find 'vue-template-es2015-compiler'
