How to configure Mocha with VS Code - testing

Hi I'm trying to setup Mocka and Chai frameworks with Visual Studio Code but I'm getting error when I'm trying to run mocha unit test saying:
Attribute 'program' does not exist ('C:\Users...node_modules/mocha/bin/_mocha')
http://prikachi.com/images/321/9672321w.png
It must be something from the settings.
This is the JSON config file of VS Code launch.json
{
// 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": "Mocha Tests",
"program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
"args": [
"-u",
"bdd",
"--timeout",
"999999",
"--colors",
"${file}"
],
"internalConsoleOptions": "openOnSessionStart"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}
]
}

Related

How to configure launch.json in Visual Studio Code to debug VueJS Project with Chrome and put bound breakpoints?

I'm currently working in a symfony/VueJS project. I would like to debug the VueJs part with VSCode and Chrome. When I put a breakpoint on a line of vuejs code after launching the chrome debuging VSCode says the breakpoint is unbound. My VueJS code path is in assets/js.
I configured the .vscode/launch.json as follows and try many configurations, but I got "unbound breakoints" after launching the chrome debuging :
{
"name": "WSL Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8003/login",
"webRoot": "${workspaceFolder}",
"sourceMap": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
Have you some ideas ?
Regards
Lamiel
Try the following configuration in your launch.json file
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
}
}
]
}
Also add the the following vue.config.js file to the root directory of the project
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}

Configuration for Debugging Mocha Unit Tests in Vue.js with VSCode

I am currently facing some problems getting my tests to debug properly with VSCode in Vue.js (I am using Mocha and Webpack)
The first configuration I found which got me a bit closer was this one.
Configuration in .vscode/launch.json
{
"type": "node",
"request": "launch",
"name": "Unit Tests",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": [
"test:unit"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
Now this solution did attach but the problem is it was only debuggin inside of the vue-cli-service.js (node_modules/#vue/cli-service/bin/vue-cli-service.js). I tries alot around here but did not came alot closer. So I thought I'd just write a Configuration myself as Vue is just using Webpack and Mocha and this should be possible. Now I got closer but still not to a version that is actually usable. Right now this is the configuration that I have
Configuration in .vscode/launch.json
{
"name": "Run mocha-webpack",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha-webpack/bin/mocha-webpack",
"args": [
"--debug-brk", "5858",
"--timeout", "120000",
"--require", "node_modules/#vue/cli-plugin-unit-mocha/setup.js",
"--webpack-config", "node_modules/#vue/cli-service/webpack.config.js",
"tests"
],
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceRoot}/node_modules/*",
"webpack:///./*": "${workspaceRoot}/*",
"webpack:///*": "*"
},
"stopOnEntry": false,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
],
"env": { "NODE_ENV": "test"},
"console": "integratedTerminal",
"outFiles": []
}
Now this got me one step closer. I can now at least set a debugger statement in my code and the debugger will stop there. However it will still not react to Breakpoints I have set using VSCode. I guess this must have to do something with the compilation of the code and the sourceMapping but I am so far unable to make this work.
Alright so TLDR
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: config => {
if (process.env.NODE_ENV === 'test') {
config.merge({
devtool: 'cheap-module-eval-source-map',
});
}
}
}
launch.json
{
"type": "node",
"request": "launch",
"name": "Run Unit Tests",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": ["test:unit", "--inspect-brk", "--watch", "--timeout", "999999"],
"port": 9229
}
What you want to do is to chain the webpack config so that if you are in testing you change your devtool to one that does not transpile your code like "cheap-module-eval-source".
Thanks to rustyx for pointing that out on GitHub.
Configure webpack to conditional behaviour depending on the environment. This is described in the documentation Working with Webpack and Modes and Environment Variables
of Vue CLI.
For the test-mode, which is used by vue-cli-service test:unit, mutate the devtool to not transpile the code e.g. cheap-module-eval-source or eval-source-map.
vue.config.js
module.exports = {
configureWebpack: config => {
if ((process.env.NODE_ENV === 'development') || (process.env.NODE_ENV === 'production')) {
config.devtool = 'source-map'
}
else if (process.env.NODE_ENV === 'test') {
config.devtool = 'cheap-module-eval-source-map'
}
}
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "test:unit debug",
"program": "${workspaceFolder}/node_modules/#vue/cli-service/bin/vue-cli-service.js",
"args": ["test:unit", "--inspect-brk", "--timeout", "900000"],
"port": 9229
}
]
}

Can't run or debug react native

I am using Visual Code, and just created an react native app through create-react-app NewTest
I already installed React Native Tools in vscode
The app is running just fine in my android device through Expo installed on it. The problem is that I can't run it on my simulator which is genymotion mobile
I get this error:
[Error] Error: Unknown error: not all success patterns were matched
My launch.json:
{
// 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": [
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
},
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
I just started the getting started tutorial and I have no idea about why it is not working. I already search over the internet and could not find much help.
Genymotion device
Error image

Work with vscode

I've been trying to debug my asp.net core application using vscode. So far I was able to build the application, but as soon as I run it, it fails with Exception thrown: 'System.IO.FileNotFoundException' in System.IO.FileSystem.dll after loading System.Resources.ResourceManager.dll
Did anyone succeed on it? I will share my launch.json and tasks.json if anyone is interested. Note that whatever is marked using <> should be modified to your needs
${workspaceRoot} should be your src folder inside aspnet-core folder
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceRoot}/<Web.Host-project-dir>/bin/Debug/netcoreapp1.1/<Web.Host-.dll>",
"args": [],
"cwd": "${workspaceRoot}",
"stopAtEntry": false,
"launchBrowser": {
"enabled": true,
"args": "${auto-detect-url}",
"windows": {
"command": "cmd.exe",
"args": "/C start ${auto-detect-url}"
},
"osx": {
"command": "open"
},
"linux": {
"command": "xdg-open"
}
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
}
]
}
tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "dotnet",
"isShellCommand": true,
"args": [],
"tasks": [
{
"taskName": "build",
"args": ["<Web.Host-project-dir>/<Web.Host-project-.csproj>" ],
"isBuildCommand": true,
"showOutput": "silent",
"problemMatcher": "$msCompile"
}
]
}
The exception:
Loaded 'C:\Program Files\dotnet\shared\Microsoft.NETCore.App\1.1.2\System.Resources.ResourceManager.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
Exception thrown: 'System.IO.FileNotFoundException' in System.IO.FileSystem.dll

Launching Chrome without web-securities in VS Code

How can I configure the Chrome Browser without web-security in launch.json file in VS Code? I installed the VS Code extension Debugger for Chrome and my launch.json seems so:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8100/",
"webRoot": "${workspaceRoot}"
}
]
}
This code launch Chrome with web-securities. How can I configure this file so that I can launch Chrome with this parameter: chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
just add
"runtimeArgs": [
"--disable-web-security"
],
So your launch.json will look like:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8100/",
"runtimeArgs": [
"--disable-web-security"
],
"webRoot": "${workspaceRoot}"
}
]
}