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

时间：2018-10-18 03:52:50

标签： javascript vue.js webpack karma-webpack

我see可以运行karma start，然后运行karma run -- --grep=testDescriptionFilter来仅对一个文件运行测试。但是，当我尝试在使用V​​ue并开始使用webpack template的项目中执行此操作时，此操作将无效。

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

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)

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

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使其只对我的文件运行测试，这是一个很好的安慰。

1 个答案:

答案 0 :(得分：0)

通过编辑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的一部分。它需要webpack使其可用。为了使其正常工作，我必须将其添加到preprocessors中的karma.conf.js数组中，如下所示：

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时，没有看到用于运行特定文件测试的任何选项。

如果确实需要，您可以创建不同的业力配置文件来为不同的文件运行测试，然后在package.json中创建脚本以使用不同的配置文件运行测试。例如。 karma-1.conf.js将运行file-1.spec.js的测试，然后您将有一个运行npm run unit-1的{​​{1}}命令：

karma start test/unit/karma-1.conf.js
相关问题
最新问题