将 Vue.js 添加到 Rails 5.1 和 Mocha 中的单元测试不起作用答案

【问题标题】：Adding Vue.js To Rails 5.1 and Unit Tests in Mocha don't work将 Vue.js 添加到 Rails 5.1 和 Mocha 中的单元测试不起作用
【发布时间】：2017-12-23 12:09:34
【问题描述】：

此处提供回购：https://github.com/systemnate/vuetesting

我通过运行命令rails _5.1.2_ new vuetesting --webpack=vue创建了一个rails应用程序

然后添加 mocha 和 chai yarn add mocha chai --save-dev

然后通过运行mkdir test/javascript创建一个测试目录

然后我创建了一个规范文件来运行...touch app/javascript/App.spec.js

并粘贴在以下代码中：

const chai = require('chai')

const expect = chai.expect

describe('first test', () => {
  it('is true', () => {
    expect(true).to.equal(true)
  })
})

并将以下内容添加到package.json

"scripts": {
  "test": "mocha test/**/*.spec.js --recursive"
}

现在之前的纱线测试通过了。让我们尝试实现一个 Vue 特定的测试。

我运行命令yarn add avoriaz mocha-webpack --save-dev

然后修改package.json以使用mocha-webpack：

  "scripts": {
    "test": "mocha-webpack test/**/*.spec.js --recursive"
  }

yarn test 仍然通过。

现在我想测试单个文件组件。首先，我添加到我的测试顶部，所以它看起来像这样：

import Vue from 'vue';
import App from '../../app/javascript/packs/App.vue';

const chai = require('chai')
const expect = chai.expect

describe('first test', () => {
  it('is true', () => {
    expect(true).to.equal(true)
  })
})

然后运行yarn test，得到如下输出

yarn test v0.27.5
$ mocha-webpack test/**/*.spec.js --recursive

ERROR in ./app/javascript/packs/App.vue
Module parse failed: /Users/natedalo/Ruby/vuetesting/app/javascript/packs/App.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div id="app">
|     <p>{{ message }}</p>
 @ ./test/javascript/App.spec.js 2:0-53
error Command failed with exit code 1.

对可能出现的问题有什么想法吗？

【问题讨论】：

我猜mocha-webpack 找不到由 Webpacker gem 创建的 Webpack 配置文件。也许有一个配置选项。

标签： javascript ruby-on-rails webpack vue.js mocha.js

【解决方案1】：

以Unit Test Vue Components for Beginners 为指导，从上面的链接中复制 webpack.config.js 和 .setup 文件，然后在 package.json 中将测试运行更改为如下所示：

"test": "mocha-webpack --webpack-config test/javascript/webpack.test.config.js test/**/*.spec.js --recursive --require test/javascript/.setup"

【讨论】：