Ruby on rails RubyonRails5.1&；Vue.js 2.4.x–；用Karma、Jasmine和#x2013测试 ；如何安装？

我有Rails 5.1.x和Vue.js 2.4.x；我不会在前端混合使用Rails和Vue.js–只使用Vue.js

我添加了以下软件包：

package.json

Q1：在哪里进行配置？在webpack/test.js或某个karma.conf.js文件中

Q2：此配置文件中有什么内容

Q3：我需要安装karma网页包吗

---

编辑1 我能够安装karma、jasmine和es6支持，但是它仍然没有正确地集成到RoR生态系统中

/package.json

/karma.conf.js

/app/javascript/test/my_test.spec.js

$karma开始

Q1：在哪里进行配置？在webpack/test.js或某个karma.conf.js文件中

A1：karma.conf.js正在运行，但我认为我的方法不是最好的

Q2：此配置文件中有什么内容

A2：仍然不确定

Q3：我需要安装karma网页包吗

是的，我想是的

---

Q4：要执行以下操作（在RoR 5.1.x中），我必须更改什么

发件人：

/app/javascript/test/components/my_component.spec.js

---

我之前在Karma中使用了自定义的网页包配置，但这只是我拥有的冗余网页包和预处理器逻辑。所以我想出了这个方法，对我来说似乎是正确的

我建议：

---

另外，我有意不复制粘贴代码片段，因为现有文档将来可能会更改。

如果不混合使用rails和vue.js，这意味着您应该有两个独立的应用程序—rails为API提供服务，vue.js应用程序使用该API并交付内容。由于您所有的问题都与vue相关，我建议您删除rails标签，而不是混淆人们。至于答案——不幸的是，我无法帮助解决因果报应。我通过一个应用程序中提供的网页包使用Vue.js和Rails，因此我也通过功能测试（capybara）来测试每一项功能，这更像是一个设置问题；这是关于“rails/webpack”和“RubyonRails 5.x”->相关RoR文件“/config/webpack/test.js”中karma测试的设置。。看看gitlab的源代码——它使用rails作为后端，vue作为前端。也许能帮你找到正确的方向。谢谢！我会在下周测试，如果成功的话，我会给你奖金

...
"devDependencies": {
    "jasmine": "^2.8.0",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^1.1.0",
    "webpack-dev-server": "^2.6.1"
  },
...

...
"devDependencies": {
    "jasmine": "^2.8.0",
    "karma": "^1.7.1",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-webpack": "^2.0.4",
    "standard": "^10.0.3",
    "webpack-dev-server": "^2.6.1"
  },
...

module.exports = function(config) {
  config.set({
    basePath: 'app/javascript/',

    browsers: ['PhantomJS'],

    files: [
      { pattern: 'test/*.spec.js', watched: false },
      { pattern: 'test/**/*.spec.js', watched: false }
    ],

    frameworks: ['jasmine'],

    preprocessors: {
      'test/*.spec.js': ['webpack'],
      'test/**/*.spec.js': ['webpack'],
    },

    webpack: {
      module: {
        loaders: [
          { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
      },
      watch: true
    },

    webpackServer: {
      noInfo: true
    }
  })
}

describe("A suite", () => {
  it("contains spec with an expectation", () => {
    expect(true).toBe(true)
  })
})

25 09 2017 15:45:02.199:WARN [watcher]: All files matched by "/home/ubuntu/workspace/app/javascript/test/**/*.spec.js" were excluded or matched by prior matchers.
25 09 2017 15:45:02.217:WARN [watcher]: All files matched by "/home/ubuntu/workspace/app/javascript/test/**/*.spec.js" were excluded or matched by prior matchers.
25 09 2017 15:45:03.147:WARN [karma]: No captured browser, open http://0.0.0.0:8080/
25 09 2017 15:45:03.156:WARN [karma]: Port 8080 in use
25 09 2017 15:45:03.156:WARN [karma]: Port 8081 in use
25 09 2017 15:45:03.157:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:8082/
25 09 2017 15:45:03.157:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
25 09 2017 15:45:03.173:INFO [launcher]: Starting browser PhantomJS
25 09 2017 15:45:03.310:ERROR [phantomjs.launcher]: Fontconfig warning: ignoring C.UTF-8: not a valid language tag

25 09 2017 15:45:03.837:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket 1lM4B1iRIygqSYz3AAAA with id 19034471
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.043 secs / 0.001 secs)

// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// Here are some Jasmine 2.0 tests, though you can
// use any test runner / assertion library combo you prefer
describe('MyComponent', () => {
  // Inspect the raw component options
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })

  // Evaluate the results of functions in
  // the raw component options
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })

  // Inspect the component instance on mount
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })

  // Mount an instance and inspect the render output
  it('renders the correct message', () => {
    const Ctor = Vue.extend(MyComponent)
    const vm = new Ctor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})