Electron with webpack and vuejs

[ghost]

hi

I have Single Page Application built with VueJS . I want to unit test my Vue Components when it is inside Electron browser . when I run the app it is hang in electron without running the tests .

this is my karma.conf.js

module.exports = function (config) {
  config.set({
    browsers: ['VisibleElectron'],
    customLaunchers: {
      VisibleElectron: {
        base: 'Electron',
        flags: ['--show']
      }
    },
    frameworks: ['mocha', 'sinon-chai'],
    reporters: ['spec'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'electron', 'sourcemap'],
    },
    client: {
      useIframe: false
    },
    webpack: require('./webpack.testing.js'),
    webpackMiddleware: {
      noInfo: true
    }
  })
}

this is my webpack.testing.js

let path = require('path')
let merge = require('webpack-merge')
let baseConfig = require('../../build/webpack.base.conf')
let utils = require('../../build/utils')
let webpack = require('webpack')
let projectRoot = path.resolve(__dirname, '../../')

var webpackConfig = merge(baseConfig, {
  // use inline sourcemap for karma-sourcemap-loader
  module: {
    loaders: utils.styleLoaders()
  },
  devtool: '#inline-source-map',
  vue: {
    loaders: {
      js: 'isparta'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../../config/test.env')
    })
  ]
})

// no need for app entry during tests
delete webpackConfig.entry

// make sure isparta loader is applied before eslint
webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
webpackConfig.module.preLoaders.unshift({
  test: /\.js$/,
  loader: 'isparta',
  include: path.resolve(projectRoot, 'src')
})

// only apply babel for test files when using isparta
webpackConfig.module.loaders.some(function (loader, i) {
  if (loader.loader === 'babel') {
    loader.include = path.resolve(projectRoot, 'test/unit')
    return true
  }
})

module.exports = webpackConfig

this is the output from running npm run unit

$ npm run unit

> testing-pro@1.0.0 unit /opt/projects/desktop/testing-pro
> karma start test/unit/karma.conf.js

20 09 2016 12:23:25.962:WARN [karma]: No captured browser, open http://localhost:9876/
20 09 2016 12:23:26.005:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
20 09 2016 12:23:26.025:INFO [launcher]: Starting browser Electron
20 09 2016 12:23:29.725:INFO [Electron 1.4.0 (Node 6.5.0)]: Connected on socket /#G-hZY5yCMogandjcAAAA with id 61156342

I use vue-cli to scaffold the app with karma support . and installed karma-electron and changed the config with it

can you help me fix this problem and run the unit tests ?

[twolfson]

Are there any errors in the electron window? It looks like you have it set up to be visible

[ghost]

ok I get it to work . but it is fails :

• when use some of electron modules it .
• when I use webpack target 'electron' .
• when change client.useFrame to true

other wise it is work good . but this means I can't run applications the depend on electron ? if you want some gist about config and tests I will give it to you .

[ghost]

Are there any errors in the electron window

• some times show require is not defined
• some times show 6 errors in console

of course each case with change of config because it is fails

[twolfson]

Yea, a gist that would allow me to reproduce the error would be great

Can you verify that your version of karma is at least 1.1.0? We introduced a patch in 1.1.0 so this library works

[ghost]

Can you verify that your version of karma is at least 1.1.0?

Karma version: 0.13.22
electron version: v1.4.0

[twolfson]

Could you please upgrade your karma version? I believe that should resolve the issue or get us much closer. I'm pre-emptively closing this issue.

To upgrade karma, run:

npm install karma@latest

[ghost]

hi again , this is gist for karma config with electron and webpack my use case is: I develop desktop applications use Electron and VueJS Stack as Single Page Application . My build processor is Webpack . When I use the karma config from the gist I get Error

Electron 1.4.0 (Node 6.5.0) ERROR
  Uncaught ReferenceError: require is not defined
  at webpack:/external%20%22path%22:1:0 <- index.js:24286

Electron 1.4.0 (Node 6.5.0): Executed 0 of 0 ERROR (0.769 secs / 0 secs)

Packages Versions: webpack 1.13.2 Karma version: 1.3.0 Electron 1.4.0 (Node 6.5.0) karma-electron: 5.1.0

[twolfson]

I'm unable to run the code in the provided gist as it has external dependencies (e.g. ../../ paths) that I don't have. Can you please create an example gist which I can clone, install dependencies for, and run to see the error you are encountering?