如何使用 Vue webpack 项目测试一个文件（从命令行）？

Question

我see，您可以运行karma start，然后运行karma run -- --grep=testDescriptionFilter，只对一个文件运行测试。但是，当我尝试在使用 Vue 并开始使用 webpack template 的项目中执行此操作时，它不起作用。

我尝试编辑karma.conf.js 中的files 数组，希望能够以这种方式测试一个文件。通常数组如下所示：

files: [
  '../../node_modules/jquery/dist/jquery.min.js',
  '../../node_modules/babel-polyfill/dist/polyfill.js',
  './index.js'
],

而index.js 看起来像这样：

import Vue from 'vue'

Vue.config.productionTip = false

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

首先我尝试包含我想要测试的文件，而不是像这样的./index.js：

files: [
  '../../node_modules/jquery/dist/jquery.min.js',
  '../../node_modules/babel-polyfill/dist/polyfill.js',
  './specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js'
],

当我这样做时，我得到一个SyntaxError: Use of reserved word 'import' 错误：

code/premium-poker-tools [master●] » npm run unit

> premium-poker-tools@1.0.0 unit /Users/adamzerner/code/premium-poker-tools
> BABEL_ENV=test karma start test/unit/karma.conf.js

18 10 2018 12:25:49.014:WARN [karma]: No captured browser, open http://localhost:9876/
18 10 2018 12:25:49.021:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 10 2018 12:25:49.022:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 10 2018 12:25:49.026:INFO [launcher]: Starting browser PhantomJS
18 10 2018 12:25:49.801:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket 1jJ_7wJ0bOiMO299AAAA with id 58854798
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'import'
  at specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js:1

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
TOTAL: 0 SUCCESS

我不确定为什么会出现该错误，但是在查看了 ./index.js 文件之后，它看起来是必要的，并且如果我想指定我只想运行规范某些文件，我必须在那里做。所以我尝试创建一个只包含我要测试的文件的set-ranges-according-to-filters.js 文件，否则与index.js 相同：

import Vue from 'vue'

Vue.config.productionTip = false

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

然后我更新了karma.conf.js中的files数组：

files: [
  '../../node_modules/jquery/dist/jquery.min.js',
  '../../node_modules/babel-polyfill/dist/polyfill.js',
  './set-ranges-according-to-filters.js'
],

并运行因果报应。我再次遇到同样的错误：

code/premium-poker-tools [master●] » npm run unit

> premium-poker-tools@1.0.0 unit /Users/adamzerner/code/premium-poker-tools
> BABEL_ENV=test karma start test/unit/karma.conf.js

18 10 2018 12:30:35.072:WARN [karma]: No captured browser, open http://localhost:9876/
18 10 2018 12:30:35.087:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
18 10 2018 12:30:35.087:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 10 2018 12:30:35.119:INFO [launcher]: Starting browser PhantomJS
18 10 2018 12:30:35.937:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket 5-U0Mca0_Vgr07-rAAAA with id 87593561
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Use of reserved word 'import'
  at set-ranges-according-to-filters.js:1

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
TOTAL: 0 SUCCESS

我希望能够从命令行测试一个文件，例如karma start --file-path-to-my-file。但是，如果这不可能，能够编辑 karma.conf.js 以便它只运行我的文件的测试将是一个很好的安慰。

Answer 1

通过编辑test/unit/index.js

一种方法是编辑test/unit/index.js。 test/unit/index.js 的以下代码测试我要测试的文件：

import Vue from 'vue'

Vue.config.productionTip = false

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1', true, /afterFlop1\.spec\.js/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

请注意，我最初尝试使用 require.context - require.context('./specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js', true, /\.spec$/) - 不会奏效。第一个参数是文件夹，而不是文件。第二个参数是指示是否也应该搜索子目录的标志，第三个参数是匹配文件的正则表达式。

---

我最初尝试创建一个不同的文件来代替 test/unit/index.js，并将其包含在 files 中而不是 ./index.js 中。我收到SyntaxError: Use of reserved word 'import' 错误的原因是import 是不属于Node 的ES6 功能。它需要 webpack 才能使其可用。为了让它工作，我必须将它添加到 karma.conf.js 中的 preprocessors 数组中，如下所示：

files: [
  '../../node_modules/jquery/dist/jquery.min.js',
  '../../node_modules/babel-polyfill/dist/polyfill.js',
  // './index.js'
  './set-ranges-according-to-filters.js'
],
preprocessors: {
  './index.js': ['webpack', 'sourcemap'],
  './set-ranges-according-to-filters.js': ['webpack', 'sourcemap']
},

直接将文件包含在files数组中

直接将文件包含在files 数组中而不是./index.js 也可以：

files: [
  '../../node_modules/jquery/dist/jquery.min.js',
  '../../node_modules/babel-polyfill/dist/polyfill.js',
  // './index.js'
  '../../src/services/monkey-patches.js',
  './specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js'
],

但有两个警告（我能想到）：

1) 使用./index.js 包括其他规范和src 文件。当您直接添加文件而不是使用./index.js 时，其他文件不会被加载，这可能会导致内容中断。它对我有用，我必须在我的规范前面的 files 数组中添加一些东西才能让它工作。

2) 我需要将以下内容添加到 preprocessors 数组中：

preprocessors: {
  // './index.js': ['webpack', 'sourcemap'],
  '../../src/services/monkey-patches.js': ['webpack', 'sourcemap'],
  './specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js': ['webpack', 'sourcemap']
},

使用命令行

我无法让karma run -- --grep=testDescriptionFilter approach 工作。当我运行 karma run --help 和 karma start --help 时，我看不到任何用于运行特定文件测试的选项。

如果你真的想要，你可以创建不同的 karma 配置文件来为不同的文件运行测试，然后在 package.json 中创建脚本来使用不同的配置文件运行你的测试。例如。 karma-1.conf.js 将运行file-1.spec.js 的测试，然后你可以有一个运行karma start test/unit/karma-1.conf.js 的npm run unit-1 命令：

{
  "scripts": {
    "unit-1": "karma start test/unit/karma-1.conf.js"
  }
}