Search code examples
javascriptvue.jswebpackkarma-webpack

How do you test one file (from the command line) with a Vue webpack project?

I see 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, it doesn't work.

I've tried editing the files array in karma.conf.js, in hopes of being able to test one file this way. Normally the array looks like this:

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

And index.js looks like this:

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)

First I tried to include the file I want to test instead of ./index.js like so:

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

When I do that, I get a SyntaxError: Use of reserved word 'import' error:

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

I'm not sure why I'm getting that error, but after looking through that ./index.js file, it looks like it is necessary, and that if I want to specify that I want to only run the specs for a certain file, I'll have to do it there. So I tried creating a set-ranges-according-to-filters.js file that only includes the file i want to test, and is otherwise the same as 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)

Then I updated the files array in karma.conf.js:

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

and ran karma. I again get the same error:

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

Preferably, I'd like to be able to test one file from the command line, something like karma start --file-path-to-my-file. But if that isn't possible, being able to edit karma.conf.js so that it only runs the tests for my file would be an ok consolation.

Solution

  • By editing test/unit/index.js

    One way is by editing test/unit/index.js. The following code for test/unit/index.js tests the file I wanted to test:

    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)

    Note that my initial attempt at using require.context - require.context('./specs/players/OutcomeAnalyzerPlayer/setRangesAccordingToFilters/afterPreflop1/afterFlop1.spec.js', true, /\.spec$/) - wouldn't have worked. The first argument is a folder, not a file. The second argument is a flag indicating whether subdirectories should be searched too, and the third is a regex to match files against.

    I initially tried to create a different file in place of test/unit/index.js and include it in files instead of ./index.js. The reason why I was getting the SyntaxError: Use of reserved word 'import' error is because import is an ES6 feature that isn't part of Node. It needs webpack to make it available. To get it working, I had to add it to the preprocessors array in karma.conf.js like so:

    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']
},

    By directly including the file in the files array

    Directly including the file in the files array instead of ./index.js works too:

    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'
],

    There are two caveats (that I could think of) though:

    1) Using ./index.js includes other specs and src files. When you just add your file directly instead of using ./index.js, those other files don't get loaded, and that could cause stuff to break. It did for me, and I had to add something to the files array in front of my spec to get it to work.

    2) I needed to add the following to the preprocessors array:

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

    Using the command line

    I wasn't able to get the karma run -- --grep=testDescriptionFilter approach working. And when I run karma run --help and karma start --help, I don't see any options for running the tests of a specific file.

    If you really want to, you could create different karma configuration files that run tests for different files, and then create scripts in package.json to run your tests with different configuration files. Eg. karma-1.conf.js would run the tests for file-1.spec.js, and then you could have a npm run unit-1 command that runs karma start test/unit/karma-1.conf.js:

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