业力单元测试Vue.js + Foundation

Question

我试图将Foundation for Sites添加到使用Vue CLI设置的第一个Vue.js项目中。

该网站运行，但是Karma + Phantomjs单元测试套件发出此错误：

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Invalid character: '`'
  at webpack:///~/foundation-sites/js/foundation.util.core.js:24:0 <- index.js:10362

我相信这与webpack / babel和Foundation的ES模块加载有关。 我不太确定如何进一步诊断和解决问题。

这是我所做的代码更改的概述...

Main.js

import jQuery from 'jquery'
window.jQuery = jQuery
window.$ = jQuery

import Foundation from 'foundation-sites'
window.Foundation = Foundation

Hello.vue

<template> ... </template>

 <script>
 export default {
   name: 'hello',
   mounted () {
     this.dropdownMenu = new Foundation.DropdownMenu($('#dropdown-menu'), {
       // These options can be declarative using the data attributes
       hoverDelay: 300
     })
   },
   data () {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
   },
   destroyed () {
     this.dropdownMenu.destroy()
   }
 }
 </script>

测试/单元/ index.js

import Vue from 'vue'
import Foundation from 'foundation-sites'
window.Foundation = Foundation

// ... auto-generated unit tests

测试/单元/ karma.conf.js

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

webpack.base.conf.js

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

Answer 1

我猜想您正在与babel进行转译，并在您的webpack配置中对其进行定义。 这是有道理的，因为在插值字符串的反引号中似乎没有出现这种转换，这在es5中不可用。

假设您已经定义了karma.conf.js，则可能只需要向其中添加webpack配置。 如果您有karma.conf.js，最好将其发布。

我使用以下内容：

// karma.conf.js
const webpackConfig = require('./build/webpack.base')

delete webpackConfig.entry

webpackConfig.resolve.alias.vue = 'vue/dist/vue.js'

module.exports = function karmaConfig(config) {
  config.set({
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'chai'],
    // this is the entry file for all our tests.
    files: ['ui-tests/index.js'],
    // we will pass the entry file to webpack for bundling.
    preprocessors: {
      'ui-tests/index.js': ['webpack'],
    },
    // use the webpack config
    webpack: webpackConfig,
    // avoid walls of useless text
    webpackMiddleware: {
      noInfo: true,
    },
    singleRun: true,
    junitReporter: {
      outputDir: '../../build/logs/',
      outputFile: 'junit-js-ui-test-report.xml',
      suite: 'review',
      useBrowserName: false,
      nameFormatter: undefined,
      classNameFormatter: undefined,
      properties: {},
    },
  })
}

和：

// ui-tests/index.js
const tests = require.context('..', true, /ui-tests\/.*\.spec$/)
tests.keys().forEach(tests)

并在我的程序包脚本中运行以下命令：

./node_modules/.bin/karma start karma.conf.js

*******更新*****

不确定您如何处理babel预设，也许您正在使用babelrc，但找不到（或者无论如何，基本webpack配置中都没有），但是您可以尝试添加类似内容，但符合您的要求：

babel: {
  babelrc: false,
  presets: [
    ['es2015' {modules: false}],
    'stage-1'
 ]
},

到build / webpack.test.conf中的webpack配置...虽然很难说，因为我不知道test.conf中有什么

Answer 2

我在另一个程序包中遇到了类似的问题，发现覆盖范围代码对此负责。

在test / unit下，打开index.js并注释以下两行：

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

这应该可以解决问题。

Answer 3

我发现的解决方案是通过Babel加载Foundation。

webpack.base.conf.js

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test'),
    resolve('node_modules/foundation-sites') // Added this line.
  ]
},

实际上，其主要原因是在Foundation文档中进行了解释：

我们的JavaScript使用ECMAScript 2015的某些功能。如果将Foundation与构建系统一起使用，则需要将我们的代码编译为ES5。 我们在模板中使用Babel来做到这一点。 Babel为每个可以想到的构建系统提供了插件，因此将其集成到现有设置中非常容易。

Foundation文档继续建议包括并设置babel的"presets": ["es2015"]但是Vue CLI的设置已经略有不同。

Vue CLI已经使用了babel-preset-env和babel-preset-stage2插件，我从那时起就开始学习ES2015> ES5转换。 Vue CLI使用几个加载程序设置了webpack，因此似乎有必要将Foundation添加到babel-loader配置中。

目前，我正在导入Foundation并将其从Vue的main.js入口点添加到全局window 。 接下来，我可能会看看是否可以使用Expose加载器公开它。