Question

我正在将Vue与Webpack模板一起使用，并且尝试通过Jest运行测试。我还使用Pug渲染模板。

但是当我运行测试时，我得到了错误：

[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)

正在运行未经测试的文件的覆盖范围...无法从/Users/magno.sousa/Documents/playground/vue-test/vuetest/src/components/HelloWorld.vue收集覆盖范围错误： [vue-jest]错误：错误：要使用包含和扩展“相对”路径的文件，必须使用“文件名”选项在未定义的第2行

堆栈：错误： [vue-jest]错误：错误：要使用包含和扩展“相对”路径的文件，必须使用“文件名”选项在未定义的第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)

这是我的Vue组件

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

和我最好的配置文件

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/**'
  ]
}

我试图在jest配置中添加filename选项，但是它不起作用。有人可以帮忙吗？

Answer 1

我认为您应该指定baseDir以便能够在玩笑测试中使用include\extends，并在文件中包含include /HelloWorld.pug之类的文件。

在玩笑的配置中，它应该是：

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

PS 。此外，您还应更改您的pug-loader的webpack配置（我认为pug-loader选项的root属性）。

Answer 2

您需要在Jest配置中的全局prop下设置vue-jest参数：

"jest": {
  "globals": {
    "vue-jest": {
      "pug": {
        "basedir": "./"
      }
    }
  },

错误：错误：使用“包含”和“相对”路径扩展必须使用“文件名”选项

2 个答案: