使用 vue-loader 依赖注入测试 vue.js 组件

Question

我正在尝试使用 webpack 的加载器 vue-loader 测试我的 Vue.js 组件。 我关注了他们的tutorial，但事情并没有按预期进行。 这是我的组件：

<template>
  <header v-once class="header">
    <router-link to="/" class="brand">
      <span class="brand-name">{{ brand }}</span>
      <span class="brand-version">{{ version }}</span>
    </router-link>
  </header>
</template>

<script>
  import { brand, version } from './Header.json';
  export default {
    name: 'Header',
    data() {
      return {
        brand,
        version
      }
    }
  };
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
  $font-stack: 'Open Sans', sans-serif;
  $primary-color: #2d5079;
  $border-color: #345b88;
  $brand-color: whitesmoke;

  .header {
    .brand {
      .brand-name {
        letter-spacing: -1px;
      }
      .brand-version {
        font-size: 50%;
      }
      display: table-cell;
      padding-left: 10px;
      vertical-align: middle;
      text-decoration: none;
      color: $brand-color;
      text-transform: lowercase;
      font-weight: 100;
      font-size: 120%;
    }
    display: table-row;
    height: 50px;
    font-family: $font-stack;
    background-color: $primary-color;
    border-color: $border-color;
    border-bottom: 1px solid;
    align-items: center;
    padding: 0 10px;
    user-select: none;
  }
</style>

这是我的规范文件：

import Vue from 'vue';

const headerInjector = require('!!vue?inject!./Header.vue');
const header = headerInjector({
  './Header.json': {
    brand: "Test",
    version: "1.2.3"
  }
});

describe('Header', () => {
  it('should be named Header', () => {
    expect(header.name).toEqual('Header');
  });
  it('should render', () => {
    const vm = new Vue({
      template: '<div><header></header></div>',
      components: {
        header
      }
    }).$mount();
    expect(vm.$el.querySelector('.brand-name').textContent).toBe('Test');
    expect(vm.$el.querySelector('.brand-version').textContent).toBe('1.2.3');
  });
});

我使用业力来运行我的测试。 这是业力配置文件：

const conf = require('./gulp.conf');

module.exports = function (config) {
  const configuration = {
    basePath: '../',
    singleRun: false,
    autoWatch: true,
    logLevel: 'INFO',
    junitReporter: {
      outputDir: 'test-reports'
    },
    browsers: [
      'PhantomJS'
    ],
    frameworks: [
      'jasmine'
    ],
    files: [
      'node_modules/es6-shim/es6-shim.js',
      conf.path.src('app.spec.js')
    ],
    preprocessors: {
      [conf.path.src('app.spec.js')]: [
        'webpack'
      ]
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    webpack: require('./webpack-test.conf'),
    webpackMiddleware: {
      noInfo: true
    },
    plugins: [
      require('karma-jasmine'),
      require('karma-junit-reporter'),
      require('karma-coverage'),
      require('karma-phantomjs-launcher'),
      require('karma-phantomjs-shim'),
      require('karma-webpack')
    ]
  };

  config.set(configuration);
};

这是用于预处理的 webpack 配置：

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],
    loaders: [
      {
        test: /.json$/,
        loader: 'json'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.vue$/,
        loader: 'vue'
      }
    ]
  },
  plugins: [],
  debug: true,
  devtool: 'source-map'
};

这里是 app.spec.js，它是 karma 加载的测试的入口点。 它负责加载所有规范文件：

const context = require.context('./components', true, /\.spec\.js$/);
context.keys().forEach(context);

现在，当我使用 karma 运行测试时，我收到以下错误：

PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  TypeError: Object is not a constructor (evaluating '__vue_exports__(injections)')
  at src/app.spec.js:1271

我不知道为什么会发生这种情况，或者这个错误意味着什么，这对我来说有点神秘。 有人能指出我的错误并解释吗？

Answer 1

遇到同样的事情，似乎是注入加载程序版本 3+ 的问题。也许需要更新使用 mocks 文档进行的 vuejs 测试。

在你的 package.json 中强制使用版本

"inject-loader": "^2.0.1",