[Feature request] Integrate with mocha-webpack

[colinskow]

I would like to use this library to test Angular applications on Electron built with Webpack.

I think the best way to do this is to add a command-line option to launch mocha-webpack instead of Mocha.

There are two distinct builds which should be enabled and disabled independently:

1. Code injected into main process
2. Code injected into the renderer process

For the renderer, Webpack test code will be loaded by HTTP from the Webpack DevServer rather than required.

[Jack-Barry]

Is this still something that's a possibility? There are only a few issues left open here including this one so figured it might still be somewhat on the roadmap.

The project we're working on uses electron-webpack and we've been able to get some very plain unit tests running, but would like to be able to implement helper modules that involve ipcRenderer and ipcMain which seems like a good fit for what electron-mocha does.

We'd be willing to help get this off the ground - unit testing stuff in Electron has proven a bit elusive for us and we'd like to have a good solution out there for anyone else who runs into this.

[inukshuk]

This project tries, as much as possible, to be a drop-in replacement for Mocha in Electron. The only extra features it adds are to expose specific characteristics of the Electron environment (main vs renderer process, debugging, the timing of when files are loaded etc.). Adding support for webpack is out of scope for this project.

That said, obviously we can try to make it easier to integrate webpack in the testing process. I don't know about the mocha-webpack project mentioned in the OP, but if this is a 'wrapper' around mocha, for example, we might be able to help make it possible to wrap electron-mocha in a similar way. I've seen electron-mocha used for testing Electron apps in a wide variety of setups (with or without pre-compilers, code coverage instrumentation) and have found it to be quite flexible. If you elaborate on specific issues at hand, it might be easier to make a call on whether they can be solved by electron-mocha itself or whether they should be addressed outside of it.

[Jack-Barry]

The mocha-webpack project (now being maintained as mochapack) is indeed a wrapper around mocha. Here's the issues solved, from their docs:

mochapack is basically a wrapper around the following command...
$ webpack test.js output.js && mocha output.js
... but in a much more powerful & optimized way.

Unlike mocha, mochapack analyzes your dependency graph and run only those test files that were affected by this file change.

It basically just simplifies all the webpack bundling, but still routes all the tests through mocha.

More specifically, we are using Vue, whose test utility relies on mochapack but we also will have classes whose methods rely on ipcRenderer. We'd like to unit test the Vue components as well as those classes, but we need to compile the Vue components via Webpack to test. A repo with what's described here is available: electron-playground.

If you clone that repo and run

npm run test:tron

you will see that it errors out with a dummy test that utilizes ipcRenderer and ipcMain, saying that ipcRenderer is undefined.

It's very possible I'm attempting to use electron-mocha incorrectly - in that case I'd at least like to add some usage examples to the docs to provide clarity for others. What I'd really like to avoid though is what's going on in the demo repo, three different test scripts:

• Unit test webpacked code (such as Vue components)
• Unit test code that relies on Electron
• e2e testing

There's probably a good way to do this, but I'm not smart enough to know it. I'm OK with running e2e tests separately using spectron since that's more time consuming and not always necessary when writing and editing modules, but it feels very nasty to have separate unit test suites. My thought is that unit testing is something that should be running in the background in watch mode while developing, and e2e should be run to ensure the system as a whole and features work before making a commit.

Would it be possible to add a flag like --mochapack in electron-mocha so that the tests are routed through mochapack? I'm digging through now, looks like it would probably be somewhere in lib/run.js, correct?

[inukshuk]

electron-mocha starts an Electron main process and then either runs mocha directly in that process, or, if you run with the --renderer option, it starts renderer process (basically a browser window) and then runs mocha in that process (also setting up some IPC to report back to the main process).

Your example runs in the main process and ipcRenderer is not available in the main process.

When you're unit testing an Electron app you're testing code that runs either in the main processes or in a renderer (or both); typically, you'll run electron-mocha twice, once in each mode. (Your test in the main process can also spawn their own windows of course, and you could roll your own e2e tests like that, but electron-mocha does not provide any helpers for that).

electron-mocha does not simply call the mocha binary; instead it does very much the same thing the mocha binary does, but in an electron environment (plus handling some additional switches). It seems to me that what mochapack provides (or watching for changes and similar tasks in general) is something that should happen outside of electron-mocha. electron-mocha just runs the tests in either of the two Electron processes.

[Jack-Barry]

@inukshuk Thanks for the quick responses, just trying to zero in on a good resolution here and I appreciate all the help.

When you're unit testing an Electron app you're testing code that runs either in the main processes or in a renderer (or both); typically, you'll run electron-mocha twice, once in each mode.

If I'm tracking correctly, this would just boil down to running electron-mocha for the main folder and for the renderer folder in the provided demo app separately? (And possibly a third folder that runs in both) I'm fine with that, can just run them using concurrently to save time.

It seems to me that what mochapack provides (or watching for changes and similar tasks in general) is something that should happen outside of electron-mocha. electron-mocha just runs the tests in either of the two Electron processes.

I agree that electron-mocha shouldn't be responsible for this.

This is my first foray into really setting up a testing environment with mocha. Still trying to wrap my head around it - but it seems like if mochapack is taking care of the bundling and watching, then it just needs to call whichever binary needed in order to execute the tests after bundling, whether it's vanilla mocha or electron-mocha. Does that make sense or am I way off base?

[inukshuk]

Yes this sounds reasonable. In my experience it's very common to run electron-mocha twice; if your code is separated into a main and renderer folder it's very easy to setup e.g., a watcher and then run electron-mocha when files change.

Since renderer tests run in their own browser window, there's a relatively large overhead if you start electron-mocha for each file change separately -- to make it more efficient you'd have to run the watch code in the same process. I'm guessing that this is what mochapack is doing (that's why it's more efficient than running webpack and mocha in sequence): but if mochapack utilizes the mocha binary then you should be able to just have it call electron-mocha instead for tests which need to run in Electron.

[rasgo-cc]

Any update on this? Trying to get electron-mocha to eat my webpack generated code. In particular, I'm using Webpack DefinePlugin which defines some global variables (I really need them as they "stamp" important info while building the project) so importing files that use them would result in a few "is not defined" errors.

Is it possible to pass to electron-mocha the mocha we want to use? In this case it would be mockapack. @Jack-Barry you suggested the "--mockapack". Any pointers on where I should look at?

[Jack-Barry]

@rasgo-cc I did not get around to implementing the BYOM (Bring Your Own Mocha) feature in mochapack due to other projects taking higher priority, but I can point you to where you'd need to go to add that functionality.

initMocha is the function mochapack is using to create an instance of a Mocha object to run tests with. If you can somehow make the constructor it uses dependent on a CLI option then you could probably point that to a constructor that uses electron-mocha under the hood. There are some notes on it from when I had more time to look into it here. Basically I was going to add a --byom flag that would point to a file that exports a customized Mocha object constructor.