v-slot compilation fails

[aantipov]

Does vue-jest support v-slot directive?

I use 4.0.0-beta.2 version of vue-jest and compilation of SFC with pug templates fails if there is v-slot directive.

For example, a template

<template lang="pug">
v-expansion-panel-content
    template(v-slot:header)
      div {{name}}

ends up with

Details:

SyntaxError: Unexpected token (1:123)
1 : var __render__ = function () {with(this){return _c('v-expansion-panel-content',{scopedSlots:_u([{key:"header",fn:function(v-slot:header){return [_c('div',[_v(_s(name))])]}}])})}}
                                                                                                                                   ^

      at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2610:13)

When I rewrite my template with the old syntax

<template lang="pug">
  v-expansion-panel-content
    template(slot="header")
      div {{name}}

then compilation works fine

[aantipov]

Looks like this could be a problem with pug compilation, because html templates seem to work fine with v-slot directive:

<template>
  <v-expansion-panel-content>
    <template v-slot:header>
      <div>{{name}}</div>
    </template>
  </v-expansion-panel-content>
</template>

[LinusBorg]

try this: template(v-slot:header="")

I suspect pug passes v-slot:header="v-slot:header" when the attribute value isn't specified or something?

[aantipov]

@LinusBorg Cool, it works! Thank you a lot for the prompt response!

I was already going to rewrite my pug templates to html ones. You saved my life :)

You were totally right, it's because of how pug treats boolean attributes https://pugjs.org/language/attributes.html#boolean-attributes

Setting pug's doctype option to "html" solves the problem

  globals: {
    'vue-jest': {
      pug: {
        doctype: 'html',
      },
    },
  },

[aantipov]

Maybe worth mentioning in the documentation...

[lobo-tuerto]

@aantipov what file should that be in?
The globals definition that is.

[LinusBorg]

in the jest config file.

[ZinChen]

@aantipov how did you find out proper jest config? 😃

[ZinChen]

@aantipov I saw the answer in your link, doctype pug option prevents mirroring of attribute. Thank for the solution by the way.