Vue Template Compilation Failed on any component that has a <template #> in it.

[MarkTallentire]

Hi,

I'm getting the error

  [vue-jest] Error: Vue template compilation failed                                                                                                                                                                                                         

      at error (node_modules/vue-jest/lib/utils.js:128:9)                                                                                                                                                                                                     
      at logResultErrors (node_modules/vue-jest/lib/utils.js:140:5)                                                                                                                                                                                           
      at processTemplate (node_modules/vue-jest/lib/process.js:100:3)                                                                                                                                                                                         
      at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:137:26)                                                                                                                                                                     
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)                                                                                                                                                   
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:569:40)                                                                                                                                          
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:607:25)           

when attempting to test any of my components that have a template slot in the. I'm using Quasar as my framework and certain things need to be done via slots on the Quasar components.

Example:

<q-table
    v-model:pagination="pagination"
    wrap-cells
    :grid="$q.screen.lt.sm"
    :columns="columns"
    :rows="data"
    row-key="field"
    :rows-per-page-options="[10, 25, 50]"
    :loading="loading"
    @request="onRequest"
  >
    <template #loading>
      <q-inner-loading showing color="primary">
        <template #default>
          <loader />
        </template>
      </q-inner-loading>
    </template>

</q-table>

This immediately fails a jest test with the above error and I can reproduce on any component I have that is using template slots on its quasar parts, if i remove the <Template #loading> then it works fine.

Any fix/ideas?

[arturomartinezdiaz]

Hello, I got the same issue.

I've managed to reduce it to a problem with the template syntax. You can check it out here: https://github.com/arturomartinezdiaz/failing-vue-test