Wie Code Coverage von Client-Seite Javascript mit Npm Skripte

Question

Ich habe eine Client-Seite Web-Anwendung in grundlegenden Javascript geschrieben, die in einem modifizierten Chrom-Browser in einer anderen Anwendung ausgeführt werden soll. Der Code wurde umfassend überarbeitet, um im aktuellen Setup zu funktionieren, und wurde für die Verwendung von ES6-Funktionen aktualisiert. Die alte Version hatte einige Browser-basierte Mocha-Tests mit Grunt.

Ich möchte jetzt die Tests hinzufügen (und neu schreiben, wenn nötig), um das neue Setup und Code Coverage hinzufügen und Grunt durch npm Skripte zu ersetzen.

Bisher gelang es mir, eine Reihe von Tests neu zu schreiben und führen sie mit:

./node_modules/babel-cli/bin/babel.js js --out-dir tmp/js --source-maps ./node_modules/babel-cli/bin/babel.js test --out-dir tmp/test --source-maps ./node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/test-spec.html spec <some options>

Dadurch wird die Ausgabe der Tests gibt. Sie gehen alle durch.

Jetzt möchte ich Abdeckung mit nyc hinzufügen, aber ich habe keine Ahnung, wie man es zum Laufen bringt. Ich habe mocha-phantomjs-istanbul gefunden, aber dies scheint mocha-phantomjs (veraltet) und istanbul 1.x (veraltet) zu verwenden.

Was muss ich tun, um dieser Konfiguration eine Codeabdeckung hinzuzufügen?

Answer 1

Ich habe nicht zu viel Erfahrung mit Istanbul und Nyc, aber vor einer Weile gelang es mir, eine Arbeitsumgebung zusammen zu bekommen, die so aussah: In meinem Package.json habe ich mehrere Skripte definiert. Die, die für die Berichterstattung wie folgt aussehen: c-Skript, das die NODE_ENV Variable setzt und dann läuft die Abdeckung Skript:

scripts : { 
    "test:c": "set NODE_ENV=test&& npm run coverage", 
    "coverage": "./node_modules/.bin/nyc --reporter=lcov --reporter=text mocha test/*.* --compilers js:babel-core/register --recursive" 
} 

ich den Test zu starten. Alle Tests befinden sich im Testverzeichnis. und das Flag "--compilers js: babel-core/register" ist da, also wird der Code direkt von es6 transpiliert. Es sieht so aus, als ob du das bereits über deine ersten beiden Skripte machst, also kannst du diesen Teil überspringen.

Dies ist auf Windows übrigens. Wenn ich mich richtig an ein Unix-System erinnere, setze NODE_ENV direkt auf diese Weise "NODE_ENV = test". Wenn Sie eine ähnliche Konfiguration vornehmen, achten Sie auf Leerzeichen wie folgt: "Setzen Sie NODE_ENV = test & & npm führen Sie ein anderes Skript aus", da dies NODE_ENV auf "test" anstatt auf "test" setzt und daher die Plugins nicht verwendet .

i Verwenden Sie die folgenden Abhängigkeiten:

"mocha": "3.2.0", 
"nyc": "^11.0.2", 
"babel-plugin-istanbul": "^4.1.4", 

hier ist auch mein .babelrc config:

{ 
    "presets": [ 
    ["es2015", { "modules": false }], 
    "stage-0", 
    "airbnb" 
    ], 
    "env": { 
    "test": { 
     "plugins": [ 
     ["istanbul", { 
      "exclude": [ 
      "**/*.spec.js", 
      "webpack.config.js" 
      ] 
     }] 
     ] 
    } 
    } 
} 

der wichtige Teil propbably ist die Konfiguration der Istanbul-Plugin, das verwendet wird, wenn die NODE_ENV ist zum Testen eingestellt. und diese nyc verwandte Config ist ein Teil meiner package.json:

"nyc": { 
    "include": [ 
     "src/**/*.js" 
    ], 
    "exclude": [ 
     "shared/src/**/*.js" 
    ], 
    "require": [ 
     "babel-core/register" 
    ], 
    "sourceMap": false, 
    "instrument": false 
    }, 

wie auch immer, für die Bequemlichkeit, es könnte eine gute idead scheinen separate Skripte innerhalb des Pakets json zu schreiben und sie dann aneinanderzureihen ein anderes Skript über sie rufen wie folgt:

"script3" : "npm run script1 && npm run script2"