จุดพัก Mocha โดยใช้ Visual Studio Code

Question 1

เป็นไปได้หรือไม่ที่จะเพิ่มเบรกพอยต์ให้กับการทดสอบ Mocha โดยใช้ Visual Studio Code

โดยปกติเมื่อทำการดีบักโค้ดเราจำเป็นต้องกำหนดค่า launch.json โดยตั้งค่าแอ็ตทริบิวต์ของโปรแกรมเป็นไฟล์ javascript เพื่อเรียกใช้งาน ฉันไม่แน่ใจว่าจะทำสิ่งนี้ให้กับมอคค่าได้อย่างไร

Question 2

คุณรู้หรือไม่ว่าคุณเพียงแค่เข้าไปที่การกำหนดค่าการเปิดตัวของคุณวางเคอร์เซอร์ไว้ข้างหลังหรือระหว่างการกำหนดค่าอื่น ๆ ของคุณแล้วกดctrl- spaceเพื่อรับการกำหนดค่ามอคค่าที่ถูกต้องที่สร้างขึ้นโดยอัตโนมัติในปัจจุบัน

ซึ่งใช้งานได้ดีสำหรับฉัน รวมถึงการหยุดที่จุดพัก (ฉันเคยมีรุ่นก่อนหน้านี้ที่ล้าสมัยแล้วซึ่งไม่ได้เกิดจากเหตุผลที่เกี่ยวข้องกับการตั้งค่าต่างๆอีกต่อไป)

ณ VSCode 1.21.1 (มีนาคม 2018) สิ่งนี้ให้ผล:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Mocha (Test single file)",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "${workspaceRoot}/node_modules/.bin/mocha",
        "--inspect-brk",
        "${relativeFile}",
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
}

หมายเหตุด้านข้าง: debug-brk ถูกยกเลิก (สำหรับทุกคนที่มีโหนด> = เวอร์ชัน 8 เป็นอย่างน้อย)

Question 3

หากคุณไม่ต้องการใช้--debug-brk+ แนบหรือระบุเส้นทางแบบสัมบูรณ์ไปยังการติดตั้งมอคค่าส่วนกลางของคุณ (ซึ่งจะหยุดทำงานหากคุณให้ launch.json อยู่ภายใต้การควบคุมเวอร์ชันและมีนักพัฒนาหลายคนในเครื่องต่างกัน) ให้ติดตั้งมอคค่าเป็นการพึ่งพาผู้พัฒนาและ เพิ่มสิ่งนี้ใน launch.json ของคุณ:

{
  "name": "mocha",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
  "stopOnEntry": false,
  "args": ["--no-timeouts", "--colors"], //you can specify paths to specific tests here
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "env": {
    "NODE_ENV": "testing"
  }
}

รองรับการดีบักอย่างสมบูรณ์ในการทดสอบของคุณเพียงแค่กด F5

--no-timeoutsตรวจสอบให้แน่ใจว่าการทดสอบของคุณไม่หมดเวลาเนื่องจากคุณหยุดที่จุดพักและ--colorsตรวจสอบให้แน่ใจว่า Mocha แสดงสีแม้ว่าจะตรวจไม่พบว่า VS Code รองรับสีก็ตาม

Question 4

อีกวิธีหนึ่งคือการใช้--debug-brkตัวเลือกบรรทัดคำสั่งของ mocha และการAttachตั้งค่าการเปิดใช้งานเริ่มต้นของโปรแกรมดีบักเกอร์ Visual Studio Code

คำอธิบายเชิงลึกที่แนะนำ (จากAndré)

เพื่อทำสิ่งนี้:

เรียกใช้ mocha จากบรรทัดคำสั่งโดยใช้คำสั่งนี้:

mocha --debug-brk

ตอนนี้ใน VS Code ให้คลิกที่ไอคอน Debug จากนั้นเลือกAttachจากตัวเลือกถัดจากปุ่ม start เพิ่มเบรกพอยต์ใน VS Code จากนั้นคลิก start

Question 5

ฉันทำงานนี้กับ VSCode บน OS X 10.10 เพียงแค่แทนที่./settings/launch.jsonไฟล์ของคุณด้วยสิ่งนี้

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Run app.js",
            "type": "node",
            "program": "app.js", // Assuming this is your main app file.
            "stopOnEntry": false,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "env": { "NODE_ENV": "production"}
        },
        {
            "name": "Run mocha",
            "type": "node",
            "program": "/Users/myname/myfolder/node_modules/mocha/bin/_mocha",
            "stopOnEntry": false,
            "args": ["test/unit.js"],
            "cwd": ".",
            "runtimeExecutable": null,
            "env": { "NODE_ENV": "production"}
        }
    ]
}

นอกจากนี้ยังมีอยู่เป็นส่วนสำคัญที่นี่

ค่าคีย์ที่คุณต้องเปลี่ยนคือprogramซึ่งควรตั้งเป็น_mochaไฟล์ปฏิบัติการและargsซึ่งควรเป็นอาร์เรย์ของไฟล์ทดสอบของคุณ

Question 6

วิธีที่ฉันทำให้มันทำงานกับ VS Code (1.8.2) บน Mac OS X คือ:

{
    "name": "Mocha",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
    "stopOnEntry": false,
    "args": ["--recursive"], //you can specify paths to specific tests here
    "cwd": "${workspaceRoot}",
    "runtimeExecutable": null,
    "env": {
        "NODE_ENV": "testing"
    }
}

ต้องติดตั้ง Mocha ในไดเร็กทอรีโมดูล npm

Question 7

ไปที่Debug > Add Configuration...เมนู
เลือกNode.jsสภาพแวดล้อม
เลือกMocha Testsตัวเลือกจากรายการแบบเลื่อนลงที่ปรากฏ
พิมพ์เส้นทางของไฟล์ทดสอบของคุณเป็นรายการสุดท้ายของargsคุณสมบัติ
เพิ่ม breakpoint
คลิกที่Debugไอคอน
เลือกMocha Testsเป็นการกำหนดค่า
กดStart debuggingปุ่ม
:-)

Question 8

ผมเคยคิดหาวิธีที่จะทำเช่นนี้ซึ่งผมจัดเป็นหนึ่งวิธีแก้ปัญหา ฉันคาดหวังว่าทีม Visual Studio Code จะให้โซลูชันที่ชัดเจนยิ่งขึ้นสำหรับสิ่งนี้ แต่ในขณะเดียวกันสิ่งที่ฉันได้ทำ:

ฉันได้สร้าง./settings/mocha.jsไฟล์ที่เรียกใช้ mocha โดยทางโปรแกรมส่งผ่านอาร์กิวเมนต์เป็นรายการไฟล์ที่จะเรียกใช้ คุณสามารถดูไฟล์เต็มนี่ ;
ฉันได้สร้างการกำหนดค่าการเปิดตัวซึ่งจะเรียกใช้./settings/mocha.jsเป็นprogramและส่งผ่านไฟล์ / รูปแบบไฟล์ที่เราต้องการทดสอบเป็นอาร์กิวเมนต์:
```
{
    "name": "Unit tests",
    "type": "node",
    "program": ".settings/mocha.js",
    "stopOnEntry": true,
    "args": ["test/unit/*.js", "test/unit/**/*.js"],
    "cwd": ".",
    "runtimeExecutable": null,
    "env": { }
}
```
ตัวอย่าง Launch.json ฉบับเต็ม

นี่จึงเทียบเท่ากับการทำmocha test/unit/*.js test/unit/**/*.jsและตอนนี้เราสามารถใช้เบรกพอยต์ในการทดสอบมอคค่าได้

Question 9

หากคุณเพิ่มตัวแปร $ {file} ที่ท้ายรายการ args คุณสามารถเริ่มการดีบักได้โดยตรงจากไฟล์ที่คุณเปิดไว้:

        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Tests",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "args": [
                "-u",
                "tdd",
                "--timeout",
                "999999",
                "--colors",
                "${file}"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        }

Question 10

ขออภัยที่เพิ่มคำตอบอื่น แต่ไม่มีคำตอบก่อนหน้านี้ที่ใช้ได้กับฉันตั้งแต่ VS Code 1.8.1 และตัวดีบักเกอร์โหนดมาตรฐานที่รวมอยู่ในนั้น นี่คือวิธีที่ฉันแก้ไข (พร้อมคำแนะนำจากคำตอบก่อนหน้านี้ที่นี่และจากเอกสารการดีบัก VS Code Node.jsอย่างเป็นทางการ) ดังนั้นจึงมีการดีบักแบบคลิก / กดปุ่มเดียว:

ตรวจสอบให้แน่ใจว่าได้ติดตั้งมอคค่าไว้devDependencyในpackages.json:"devDependencies": { "mocha": "^3.2", ... }
เรียกใช้npm installในไดเร็กทอรีของคุณpackage.jsonเพื่อให้แน่ใจว่าได้ติดตั้งมอคค่าแล้วnode_modules/
เปิด.vscode/launch.json(หรือใน VS Code กด F1 เริ่มพิมพ์ "launch" และเลือก "Debug: Open launch.json")
คลิกปุ่ม "เพิ่มการกำหนดค่า" สีน้ำเงินที่ด้านล่างขวา (หรือเพียงแค่คัดลอกและวางรายการอื่นของคุณ) ขั้นตอนนี้เป็นทางเลือก ... ฉันหมายถึงคุณสามารถใช้การกำหนดค่าที่มีอยู่ซ้ำได้ แต่ฉันขอแนะนำให้เพิ่มหนึ่งรายการเพื่อไม่ให้สับสน
เปลี่ยนสิ่งต่อไปนี้ในของคุณlaunch.jsonจากนั้นเลือกชื่อการกำหนดค่าใหม่ในหน้าต่างดีบักใน VS Code แล้วคลิกลูกศรสีเขียวเพื่อเริ่มการดีบักโหนด + การทดสอบมอคค่าของคุณ!

ในการกำหนดค่าใหม่ใน launch.json:

"configurations": [{
    "name": "whatever name you want to show in the VS Code debug list",
    "type": "node",
    "cwd": "${workspaceRoot}",
    "program": "${workspaceRoot}/node_modules/mocha/bin/mocha",
    "args": ["--debug-brk=5858", "--no-timeouts", "--colors", "test/**/*.js"],
    "address": "localhost",
    "port": 5858,
    // the other default properties that are created for you are fine as-is
}, ...]

สิ่งนี้ถือว่ารูปแบบtest/**/*.jsจะใช้ได้กับตำแหน่งที่คุณทำการทดสอบ เปลี่ยนตามความเหมาะสม.

อย่าลังเลที่จะเปลี่ยนพอร์ตตราบเท่าที่คุณเปลี่ยนทั้งในคุณสมบัติargsและportคุณสมบัติให้ตรงกัน

ความแตกต่างที่สำคัญสำหรับฉันคือการตรวจสอบให้แน่ใจว่ามีมอคค่าอยู่node_modulesโดยใช้programเพื่อชี้ไปที่ปฏิบัติการและargsจำเป็นต้องdebug-brk=xชี้ไปที่พอร์ตที่ระบุในport. ส่วนที่เหลือข้างต้นทำให้สิ่งต่าง ๆ สวยขึ้นและง่ายขึ้น

ขึ้นอยู่กับคุณและทีมของคุณว่าคุณใส่.vscode/launch.jsonที่เก็บหรือไม่ เป็นไฟล์ IDE เท่านั้น แต่ทั้งทีมของคุณสามารถใช้งานได้ในลักษณะนี้ไม่มีปัญหาเนื่องจากเส้นทางและการติดตั้งทั้งหมดเป็นแบบสัมพัทธ์และชัดเจน

เคล็ดลับ: package.jsonสามารถรวมscriptsแท็กที่เรียกใช้ mocha ด้วยบางอย่างเช่น"test": "./node_modules/.bin/mocha"แต่ VS Code ไม่ได้ใช้ แต่จะใช้เมื่อnpm testถูกเรียกใช้ที่บรรทัดคำสั่งแทน อันนี้ทำให้ฉันสับสนเล็กน้อย สังเกตที่นี่เผื่อว่าคนอื่นจะสับสนด้วย

แก้ไข: VS Code 1.9.0 ได้เพิ่มตัวเลือก "Add Configuration" ในเมนูแบบเลื่อนลงการกำหนดค่าการดีบักและคุณสามารถเลือก "Node.js Mocha Tests" ซึ่งช่วยให้ส่วนใหญ่ง่ายขึ้น คุณยังคงต้องแน่ใจว่ามอคค่าอยู่ในของคุณnode_modulesและอาจต้องอัปเดตcwdและสุดท้ายruntimeArgs(ซึ่งเป็นรูปแบบในการค้นหาการทดสอบของคุณ) เพื่อชี้ไปยังเส้นทางที่เหมาะสม แต่เมื่อคุณตั้งค่าคุณสมบัติทั้งสองนี้แล้วก็น่าจะใช้งานได้ดีจากตรงนั้น

Question 11

ใน launch.json ให้เพิ่มการกำหนดค่าอีก 1 รายการด้านล่าง

{
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--timeout",
        "10000",
        "${workspaceRoot}/services/*.spec.js",
        "${workspaceRoot}/*.spec.js"
      ],
      "internalConsoleOptions": "openOnSessionStart"
    },

หากคุณต้องการกำหนดค่าเวอร์ชันโหนดเพียงเพิ่มruntimeExecutableฟิลด์เช่นนี้

{
      "type": "node",
      "request": "launch",
      "name": "Mocha Tests",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "args": [
        "--timeout",
        "10000",
        "${workspaceRoot}/services/*.spec.js",
        "${workspaceRoot}/*.spec.js"
      ],
      "internalConsoleOptions": "openOnSessionStart",
      "runtimeExecutable": "${env:HOME}/.nvm/versions/node/v8.2.1/bin/node"
    },

Question 12

1) ไปที่

.vscode

แล้ว

Launch.json

ไฟล์

2) เพิ่มการกำหนดค่าต่อไปนี้ใน launch.json -

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Mocha Test",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/*folder_path_containing_test*/node_modules/.bin/mocha",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/*folder_path_containing_test*/node_modules/.bin/mocha.cmd"
            },
            "runtimeArgs": [
                "--colors",
                "--recursive",
                "${workspaceRoot}/*folder_path_till_test*/tests"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/*folder_path_to_test*/app.js"
        }
    ]
}

3) ตั้งค่าเบรกพอยต์ในไฟล์ทดสอบจากนั้นกด F5

Question 13

สำหรับใครที่ใช้ Windows หากคุณติดตั้งมอคค่าทั่วโลกการตั้งค่าโปรแกรมไปยังเส้นทางต่อไปนี้ใช้ได้ผลสำหรับฉัน (สลับชื่อผู้ใช้ของคุณ)

"program": "C:\\Users\\myname\\AppData\\Roaming\\npm\\node_modules\\mocha\\bin\\_mocha"

Question 14

นี่ใช้งานได้กับฉันบนเครื่อง Windows 7 ฉันติดตั้งมอคค่าทั่วโลกแล้ว แต่การกำหนดค่านี้ชี้ไปที่การติดตั้งโปรเจ็กต์เพื่อหลีกเลี่ยงความต้องการเส้นทางโปรไฟล์ผู้ใช้ (ซึ่ง btw ฉันลองใช้ตัวแปร% USERPROFILE% แล้วไม่ประสบความสำเร็จ) ฉันตั้งค่าจุดพักในการทดสอบมอคค่าได้แล้ว เย้!

{
        "name": "Mocha Tests",
        "type": "node",
        "request": "launch",
        "stopOnEntry": false,
        "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
        "cwd": "${workspaceRoot}",
        "args": ["./test/**/*.js"],
        "runtimeExecutable": null,
        "envFile": "${workspaceRoot}/.env"
    }

Question 15

สำหรับผู้ที่ใช้เสียงฮึดฮัดหรืออึกการกำหนดค่านั้นค่อนข้างง่าย

Launch.json

{
"version": "0.2.0",
"configurations": [

    {
        "name": "Run mocha by grunt",
        "type": "node",
        "program": "${workspaceRoot}/node_modules/grunt/bin/grunt",
        "stopOnEntry": false,
        "args": ["mochaTest"],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": null
    }
]}

Gruntfile.js

module.exports = function (grunt) {

grunt.initConfig({
    mochaTest: {
        test: {
            options: {
                reporter: 'spec'
            },
            src: ['test/**/*test.js']
        }
    }
});

grunt.loadNpmTasks('grunt-mocha-test');

grunt.registerTask('default', 'mochaTest');};

Question 16

ในรุ่น VSCode 1.13.0 (MacOS) พวกเขามีมันในตัวภายใต้การกำหนดค่า Mocha Tests->

Question 17

เมื่อใช้ Babel หรือสร้างไฟล์จาวาสคริปต์ยังวางจุดพักในแหล่งที่มา - คุณต้องให้แน่ใจว่าจะเปิดใช้งานและกำหนดsourceMaps outFilesนี่คือตัวอย่างการกำหนดค่าที่เหมาะกับฉัน

    {
        "name": "Mocha Test",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/packages/api/node_modules/mocha/bin/_mocha",
        "cwd": "${workspaceRoot}/packages/api",
        "args": ["--colors", "--no-timeouts", "out/test"],
        "outFiles": ["${workspaceRoot}/packages/api/out/*"],
        "sourceMaps": true,
    },

หมายเหตุ - คุณจะต้องแก้ไขoutFilesเพื่อรวมทุกสิ่งที่คุณอาจต้องการเพิ่มเบรกพอยต์ สิ่งนี้อาจน่าเบื่อกว่าเมื่ออยู่ในโครงการที่ต้องพึ่งพาคนเดียวและหลายโครงการ

Question 18

เมื่อใช้ TypeScript การกำหนดค่าต่อไปนี้ใช้ได้กับฉันใน Visual Studio Code 0.8.0 (tsc 1.5.3)

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "build",
        "declaration": false
    },
    "files": [
        "./src/index.ts",
        "./src/test/appTests.ts"
    ]
}

สิ่งสำคัญที่ควรทราบก็คือแผนที่ต้นทางถูกสร้างขึ้นและไดเร็กทอรีเอาต์พุตสำหรับ js ถูกตั้งค่าเป็น build

launch.json

    {
        "name": "Attach",
        "type": "node",
        // TCP/IP address. Default is "localhost".
        "address": "localhost",
        // Port to attach to.
        "port": 5858,
        "sourceMaps": true,
        "outDir": "build"
    }

โปรดทราบว่าsourceMapsตั้งค่าเป็นtrueและoutDirตั้งค่าเป็นbuild

เพื่อแก้ไขข้อบกพร่อง

ติดเบรกพอยต์ในindex.tsไฟล์ typescript ที่นำเข้าอื่น ๆ
เปิดเทอร์มินัลและเรียกใช้: mocha --debug-brk ./build/test/appTests.js
จาก VSC เรียกใช้การกำหนดค่าการเรียกใช้ 'แนบ'

Question 19

นี่คือตัวอย่างของการกำหนดค่าการเปิดตัว (launch.json)จาก Microsoft ซึ่งทำงานร่วมกับ Mocha และอนุญาตให้ใช้ดีบักเกอร์

นอกจากนี้ยังมีคำอธิบายวิธีใช้ตัวเลือก --debug-brk

สุดท้ายนี่คือเวอร์ชันทางเลือกของวิธีการดีบักโค้ดด้วยการทดสอบ Mochaโดยใช้ไฟล์ task.json ของ VS Code และ Gulp task runner

Question 20

หากคุณมีการพึ่งพาในการทดสอบคุณสามารถแนบได้อย่างง่ายดาย

ตัวอย่างเช่นฉันกำลังใช้mongo-unit-helperการทดสอบหน่วยรวมกับฐานข้อมูล

package.json สคริปต์คือ: mocha --recursive --require ./test/mongo-unit-helper.js --exit"

launch.jsonลักษณะของฉัน:

  "configurations": [
  {
  "type": "node",
  "request": "launch",
  "name": "Mocha Tests",
  "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
  "args": [
    "-u",
    "tdd",
    "--timeout",
    "999999",
    "--colors",
    "--recursive",
    "--require",
    "${workspaceFolder}/test/mongo-unit-helper.js",
    "${workspaceFolder}/test/**/*.js",
  ],
  "internalConsoleOptions": "openOnSessionStart"
 }
]

วิธีการแก้ปัญหาคือการใส่--requireแยกต่างหากในในargslaunch.json

Question 21

วิธีแก้ปัญหาที่ง่ายที่สุด

เพิ่มรหัสต่อไปนี้ใน launch.json ภายในโฟลเดอร์. vscode:

{
            "name": "Unit tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "args": [
            ],
        }

อย่างไรก็ตามคุณอาจต้องการเพิ่มอาร์กิวเมนต์การหมดเวลาด้วย:

 {
            "name": "Unit tests",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
            "args": [
                "--timeout",
                "999999"
            ],
        }