Error: Error: the "filename" option is required to use includes and extends with "relative" paths

I'm using Vue with webpack template and I'm trying to run tests with Jest. I'm also using Pug to render the templates.

But when I run the tests I get the error:

[vue-jest] Error: Error: the "filename" option is required to use includes and extends with "relative" paths
    at undefined line 2


  at error (node_modules/vue-jest/lib/throw-error.js:2:9)
  at module.exports (node_modules/vue-jest/lib/compilers/pug-compiler.js:11:5)
  at getTemplateContent (node_modules/vue-jest/lib/template-compiler.js:11:12)
  at compileTemplate (node_modules/vue-jest/lib/template-compiler.js:23:25)
  at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:70:29)

Running coverage on untested files...Failed to collect coverage from /Users/magno.sousa/Documents/playground/vue-test/vuetest/src/components/HelloWorld.vue ERROR: [vue-jest] Error: Error: the "filename" option is required to use includes and extends with "relative" paths at undefined line 2

STACK: Error: [vue-jest] Error: Error: the "filename" option is required to use includes and extends with "relative" paths at undefined line 2

at error (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/vue-jest/lib/throw-error.js:2:9)
at module.exports (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/vue-jest/lib/compilers/pug-compiler.js:11:5)
at getTemplateContent (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/vue-jest/lib/template-compiler.js:11:12)
at compileTemplate (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/vue-jest/lib/template-compiler.js:23:25)
at Object.module.exports [as process] (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/vue-jest/lib/process.js:70:29)
at ScriptTransformer.transformSource (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/jest-runtime/build/script_transformer.js:247:35)
at exports.default (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/jest/node_modules/jest-cli/build/generate_empty_coverage.js:16:105)
at Object.worker (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/jest/node_modules/jest-cli/build/reporters/coverage_worker.js:48:84)
at execMethod (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/jest-worker/build/child.js:83:29)
at process.on (/Users/magno.sousa/Documents/playground/vue-test/vuetest/node_modules/jest-worker/build/child.js:40:7)

Here is my Vue component

<template lang="pug">
  include HelloWorld.pug
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

and my jest config file

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  'vue-jest': {
    pug: {
      filename: 'pug'
    }
  },
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
}

I tried to add the filename option in the jest config but it's not working. Can anyone help out please?

1 answer

  • answered 2018-07-18 15:09 Max Sinev

    I think you should specify baseDir to be able to use include\extends with jest testing and include files in your tempaltes like include /HelloWorld.pug.

    And in jest config it should be:

    'vue-jest': {
      pug: {
        baseDir: path.join(__dirname, 'my/folder/with/views');
      }
     },
    

    P.S. Also your webpack configuration of pug-loader should be changed (I think root property of pug-loader options).