运行 Karma 使用 Vueify 对 VueJS 单文件组件进行测试

Question

我正尝试运行使用 Karma 进行单元测试。我有 calendar.tests.js 看起来很像这样的文件：

import { handleSelectDay } from '../components/Calendar/index.vue'
describe('Calendar', () => {
  describe('handleSelectDay', () => {
    const data = {};

    describe('updates data', () => {
      it('should set the selectedDay to a new id', () => {
        handleSelectDay('id');
        expect(data.daySelected).to.equal('id');
      });
    });
  });
});

当我运行使用 Karma 进行此测试时，我得到以下信息：TypeError: (0 , _index.handleSelectDay) is not a function is not a function

我的 karma.conf.js 看起来像：

module.exports = function (config) {
  config.set({

    frameworks: ['browserify', 'mocha'],
    files: ['static/js/apps/FutureHours/test/calender.tests.js'],
    preprocessors: {
      'static/js/apps/**/test/*.js': ['browserify']
    },
    browsers: ['Chrome'],
    logLevel: 'LOG_DEBUG',

    plugins: [
      'karma-mocha',
      'karma-browserify',
      'karma-chrome-launcher',
      'karma-spec-reporter'
    ],

    browserify: {
      debug: true,
      transform: [['babelify', { presets: ['env'] }], 'vueify']
    }
  })
}

如何让 Karma 与 VueJS 单文件组件配合使用？

Answer 1

问题是您无法从 .vue 组件中进行命名导出。相反，组件中使用的任何方法都必须通过单元测试中的组件对象进行访问。在组件 methods 之外使用的任何函数都应该存在于它们自己的 ES 模块中，以便更容易地对它们进行单元测试。

运行 Karma 使用 Vueify 对 VueJS 单文件组件进行测试

Running Karma tests with VueJS single file component using Vueify

browserify

karma-mocha

vue-component

vuejs2

vueify