Using mochapack in IDEs

Debug in IDEA (WebStorm, IntelliJ, ...)

1. Make sure the NodeJS repository plugin is installed and enabled. The plugin is not bundled with every IDEA product, but it can be installed from the JetBrains plugin repository.
2. Create a Testrunner config
   • replace Mocha package path with path of mochapack (should be a (dev-) dependency of your project)
   • set some additional configuration options (mochapack.opts in this case)
   • specify the tests to run

3. make sure that your webpack config contains the following (important for setting breakpoints in src):

   {
     ...
   
     output: {
         devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
         devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
       },
   
     ...
   }
   

4. also you have to use a non-eval devtool in your webpack config, e.g.

   {
     ...
   
     devtool: '#inline-cheap-module-source-map',
   
     ...
   }
   

5. start your run configuration in debug mode
6. happy testing

Note: Debugging in watch mode does not work with IDEA. Therefore you have rerun your debugger whenever you make changes. It's recommended to specify only a single test file to reduce start-up time.

Debug in Visual Studio Code

1. make sure that you use a inline devtool in your webpack config, e.g.

   {
     ...
   
     devtool: '#inline-cheap-module-source-map',
   
     ...
   }
   

2. make sure that your webpack config contains the following (important for setting breakpoints in src):

   {
     ...
   
     output: {
         devtoolModuleFilenameTemplate        : '[absolute-resource-path]',
         devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
       },
   
     ...
   }
   

3. create a launch.json in your .vscode folder like the following:

   "version": "0.2.0",
   "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9229
    }
   ]
   

4. start the debugger with F5
5. happy testing