Question

基本上，组件没有被编译，所以当它遇到Unexpected token <

时出现<template>错误

我运行了以下命令：

$ npm install --save-dev jest
$ npm install --save-dev vue-jest
$ npm install --save-dev vue-test-utils

我在package.json中列出了以下内容：

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "jest"
  },

...

"jest": {
    "unmockedModulePathPatterns": [
        "<rootDir>/node_modules/vue"
    ],
    "moduleFileExtensions": [
        "js",
        "vue"
    ],
    "scriptPreprocessor": "index.js"
}

我在根目录中创建了一个__test__文件夹，其中包含一个简单的测试：

const Vue = require("vue");
const VueTestUtils = require("vue-test-utils");

Vue.config.debug = true;
Vue.config.async = false;

Vue.use(VueTestUtils.install);

import Hello from '../src/components/Hello.vue'

const Constructor = Vue.extend(Hello)
const vm = new Constructor().$mount()

describe('initial test', () => {
  it('should be 1', () => {
    expect(1).toBe(1)
  })
})

我最近也遇到了这个错误，并且不太确定如何配置Vue.js所以它将使用包含编译器的构建运行：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

一直在四处寻找，所以任何帮助都会受到赞赏

Answer 1

您需要使用Jest transform来转换Jest Vue文件。 Jest转换器是一个同步函数，它将文件和路径作为输入并输出转换后的代码。

我维护一个为你做的npm包 - vue-jest。 npm install --save-dev vue-jest

您需要在jest（或使用--config的单独文件）中添加package.json部分。您的配置应如下所示：

  "jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "babel-jest",
    ".*\\.(vue)$": "vue-jest"
  }
}

这告诉jest使用jest-vue作为扩展名为.vue的文件的转换。

您可以在此处查看使用Vue Test Utils的工作仓库 - https://github.com/eddyerburgh/vue-test-utils-jest-example

在Vue.js中运行Jest测试

1 个答案: