Ruby on Rails 5.1 和 Vue.js 2.4.x – 使用 Karma、Jasmine 进行测试 – 如何安装？

Posted 2023-02-22

【中文标题】Ruby on Rails 5.1 和 Vue.js 2.4.x – 使用 Karma、Jasmine 进行测试 – 如何安装？

【英文标题】：Ruby on Rails 5.1 & Vue.js 2.4.x – Testing with Karma, Jasmine – How to install?

【发布时间】：2018-02-21 23:35:28

【问题描述】：

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

我添加了以下包：

package.json

...
"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"
  ,
...

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

Q2：这个conf文件里有什么？

Q3：我需要安装 karma-webpack 吗？

---

编辑 1

我能够安装 karma、jasmine 和 es6 支持，但是 它仍未正确集成到 RoR 生态系统中

/package.json

...
"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"
  ,
...

/karma.conf.js

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
    
  )

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

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)

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

A1：karma.conf.js 工作正常，但我认为我的方法不是最好的

Q2：这个conf文件里有什么？

A2：还不确定

Q3：我需要安装 karma-webpack 吗？

A3：是的，我想是的

---

Q4：我必须更改哪些内容才能执行以下操作（在 RoR 5.1.x 中）？

发件人：https://vuejs.org/v2/guide/unit-testing.html

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

// 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!')
  )
)

【问题讨论】：

如果您不混合使用 rails 和 vue.js，这意味着您应该有 2 个独立的应用程序 - Rails 提供 API 和 Vue.js 应用程序使用该 API 并交付内容。而且由于您所有的问题都与 vue 相关，因此我建议您删除 rails 标签，以免混淆。至于答案 - 不幸的是我无法帮助 Karma。我通过 webpack 在一个应用程序中使用 Vue.js 和 Rails，因此我还通过功能测试 (capybara) 测试了一切

更多的是设置问题；这是关于“rails/webpacker”和“Ruby on Rails 5.x”中业力测试的设置——>相关的RoR文件：“/config/webpack/test.js”

.. 看看 gitlab 的源代码——它使用 rails 作为后端，vue 作为前端。 github.com/gitlabhq/gitlabhq。可能会帮助您朝着正确的方向前进。

【参考方案1】：

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

我会推荐这个：https://github.com/rails/webpacker/blob/master/docs/testing.md#karma-setup-for-typescript

附：我故意不复制粘贴代码 sn-ps，因为现有文档将来可能会更改。

【讨论】：

谢谢！我会在接下来的一周内对其进行测试，如果成功，我会给你赏金