vue 2.6+ named slot and pug causes error

[eddyerburgh]

Version

1.0.0-beta.29

Reproduction link

https://github.com/yoyoys/vue-slot-pug-bug-jest-reproduction

Steps to reproduce

1. create project by vue-cli 3.6.3, using jest, TypeScript, TSLint, Class Component
2. npm i -D pug pug-plain-loader
3. add a component which has named slot (SlotGuy.vue)
4. run npm run test:unit

What is expected?

test run success

What is actually happening?

I've got a error below:

  ● Test suite failed to run

    SyntaxError: Unexpected character '#' (1:150)

      at Parser.pp$4.raise (node_modules/vue-template-es2015-compiler/buble.js:2757:13)
      at Parser.pp$8.getTokenFromCode (node_modules/vue-template-es2015-compiler/buble.js:4906:8)
      at Parser.pp$8.readToken (node_modules/vue-template-es2015-compiler/buble.js:4628:15)
      at Parser.readToken (node_modules/vue-template-es2015-compiler/buble.js:6029:22)
      at Parser.pp$8.nextToken (node_modules/vue-template-es2015-compiler/buble.js:4619:15)
      at Parser.pp$8.next (node_modules/vue-template-es2015-compiler/buble.js:4576:8)
      at Parser.pp.eat (node_modules/vue-template-es2015-compiler/buble.js:577:10)
      at Parser.pp.expect (node_modules/vue-template-es2015-compiler/buble.js:641:8)
      at Parser.pp$1.parseFunctionParams (node_modules/vue-template-es2015-compiler/buble.js:1230:8)
      at Parser.pp$1.parseFunction (node_modules/vue-template-es2015-compiler/buble.js:1218:8)

[lobo-tuerto]

For those interested, workaround is here: https://github.com/vuejs/vue-test-utils/issues/1210#issuecomment-484327439

[prograhammer]

@lobo-tuerto Thanks for the heads up on the work-around.

However, this breaks Jest coverage on Vue-cli 3 and pug right out of the box (if you add a component with slot:foo). The slot:foo="" workaround does work though.

[SzNagyMisu]

Any progress on this one?

I know this happens because, by default, pug transpiles to xml, where valueless attributes are not permitted. So where it meets one, sets the attribute name as value (template(slot:foo) becomes <template slot:foo="slot:foo"></template>). So the solution would be to tell pug to transpile to html, where valueless attributes are permitted, so this does not happen. One could start the template by specifying the doctype as shown in the pug docs:

<template lang="pug">
doctype html
#my-component
  //- ...

But I would consider this just another workaround, since we have to modify the source code to solve a configuration problem.

The best would be - in my opinion - to place { doctype: 'html' } somewhere in some config file. Only I can't figure out which file and where exactly... I guess it must be either vue.config.js or jest.config.js, but I had no luck this far.

Any help would be appreciated.

[Shinigami92]

@SzNagyMisu Have you tried this?
https://github.com/vuejs/vue-jest/blob/master/README.md#supported-template-languages

But it's passed into pug.compile() and not pug.render(), hope it works anyway

[SzNagyMisu]

Good one! Thanks @Shinigami92!

I added

module.exports = {
  // ...
  globals: {
    'vue-jest': {
      pug: { doctype: 'html' }
    }
  }
}

to my jest.config.js and now it works as expected.

[Shinigami92]

IMO this should be the default

[Blfrg]

The fix detailed above by @SzNagyMisu using the config option pointed out by @Shinigami92 resolves the issue for me as well.

Could this setting be made the default config for pug?

If that's not appropriate, would it be ok if the config description were added to the documentation so it's easier for vue+pug users to find?