CODEWITHSUNDEEP
unit-testingvue.jsvisual-studio-codemocha.js
Olivier Levrey
Olivier Levrey

Reputation: 115

How to debug mocha unit tests in a vue application in VSCode?

I have a vue application with unit tests using unit-mocha. Tests run fine, but I can't debug them using VSCode debugger.

Here is what I've done:

  1. First, I created a vue app in VSCode:
vue create hello-world
  1. Then, I added unit-mocha:
cd hello-world
vue add unit-mocha

This generates file tests/unit/example.spec.js:

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })
})
  1. I ran the tests:
npm run test:unit

This works just fine.

But now, I would like to add breakpoints in the file and run the debugger.

So I did the following based on this thread: Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode

  1. I switched to Run tab on VSCode and clicked create a launch.json file:
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Unit Tests",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
      "port": 9229,
      "console": "integratedTerminal"
    }
  ]
}
  1. I also added vue.config.js as suggested in the thread:
module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "test") {
      config.merge({
        devtool: "cheap-module-eval-source-map",
      });
    }
  },
};
  1. Finally I set a breakpoint on the first statement of example.spec.js. and clicked Start debugging (with "Debug Unit Tests" selected). I have the following output in the terminal console:
Debugger listening on ws://127.0.0.1:53241/2faf3b6b-dd6f-476a-80bc-51b99df90ec3
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Debugger listening on ws://127.0.0.1:9229/ad9ccf9a-9e2c-4ed9-a379-3e942c68d185
For help, see: https://nodejs.org/en/docs/inspector

Debugger seems to start (even twice??) but the test code isn't executed. My breakpoint is not hit (it turned gray and say "Unbound breakpiont"). Then I stopped the debugger.

I then retried to rerun the tests (npm run test:unit) to make sure it's not broken but it's ok.

Can anyone tell me what I am doing wrong?

Upvotes: 1

Views: 976

Answers (2)

Olivier Levrey
Olivier Levrey

Reputation: 115

I've finally found the solution I was looking for:

launch.json (thanks to OmegaOdie):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Unit Tests",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npx",
      "console": "integratedTerminal",
      "runtimeArgs": ["vue-cli-service", "test:unit", "--inspect-brk"]
    }
  ]
}

vue.config.json (thanks to this thread):

module.exports = {
  devServer: {
    ...
  },
  // should be false for production
  productionSourceMap: true,
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "test") {
      // if unit testing, keep original lines to make breakpoints in original source files work
      config.merge({
        devtool: "cheap-module-eval-source-map",
      });
    } else {
      // if not unit testing, use normal source maps
      config.merge({
        devtool: "source-map",
      });
    }
  },
};

With this configuration, no need of debugger; instruction for breakpoints to work.

Upvotes: 3

OmegaOdie
OmegaOdie

Reputation: 379

It aint perfect but seems to be working for me, more details can be found @https://nodejs.org/en/docs/guides/debugging-getting-started/ but the launch.json config should look like this

     {
        "name": "TestBreak",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npx",
        "console": "integratedTerminal",
        "runtimeArgs": [
          "vue-cli-service",
          "test:unit",
          "--inspect-brk"
        ],
      }

I'm hitting breakpoints with this. However I have to add debugger statements like this

debugger; // eslint-disable-line no-debugger

The comment is required for me due to some unknown linter.

Upvotes: 1

Related Questions