如何使用 Vue webpack 项目测试一个文件（从命令行）？
How do you test one file (from the command line) with a Vue webpack project?
我 that you could run karma start and then karma run -- --grep=testDescriptionFilter to run a test for just one file. However, when I try to do that in a project where I am using Vue and got started with the 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 以便仅 运行 对我的文件进行测试将是一个不错的安慰。
通过编辑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 是一个 ES6 特性，它不是 Node.js 的一部分。它需要 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 工作。当我 运行 karma run --help 和 karma start --help 时，我没有看到 运行 测试特定文件的任何选项。
如果你真的想要，你可以创建不同的 karma 配置文件，运行 测试不同的文件，然后在 package.json 中创建脚本到 运行 你的测试不同的配置文件。例如。 karma-1.conf.js 会 运行 测试 file-1.spec.js，然后你可以有一个 npm run unit-1 命令 运行s karma start test/unit/karma-1.conf.js:
{
"scripts": {
"unit-1": "karma start test/unit/karma-1.conf.js"
}
}
我karma start and then karma run -- --grep=testDescriptionFilter to run a test for just one file. However, when I try to do that in a project where I am using Vue and got started with the 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 以便仅 运行 对我的文件进行测试将是一个不错的安慰。
通过编辑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 是一个 ES6 特性，它不是 Node.js 的一部分。它需要 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 karma run --help 和 karma start --help 时，我没有看到 运行 测试特定文件的任何选项。
如果你真的想要，你可以创建不同的 karma 配置文件，运行 测试不同的文件，然后在 package.json 中创建脚本到 运行 你的测试不同的配置文件。例如。 karma-1.conf.js 会 运行 测试 file-1.spec.js，然后你可以有一个 npm run unit-1 命令 运行s karma start test/unit/karma-1.conf.js:
{
"scripts": {
"unit-1": "karma start test/unit/karma-1.conf.js"
}
}