Écrire des tests avec le karma/jasmine

Question

J'ai développé des applications js normales en utilisant des frameworks comme le brai/angulaire. Ils ont déjà tout intégré pour la compilation et les tests. J'ai commencé à construire une application en vanilla js. J'ai écrit du code en es6. J'ai commencé avec des tests utilisant du karma/jasmin. Je suis coincé avec la configuration. Je suis passé par quelques articles et j'ai eu un peu de succès mais encore une fois je me suis retrouvé coincé dans une erreur relative de browserify dans le karma. ERROR [framework.browserify]: Error: Cannot find module

Comment puis-je écrire des tests avec du karma/jasmin. Que utiliser? webpack/browserify?

Ma structure app est: app/js/**/*.jsapp/tests/**/*.jsapp/css/**.cssapp/index.htmlapp/Gruntfile.jsapp/karma.conf.jsapp/package.jsonapp/server.js

Ceci est mon gruntfile.js

module.exports = function(grunt) { 
    grunt.initConfig({ 
     browserify: { 
      development: { 
       src: [ 
        "./js/application.js", 
       ], 
       dest: './js/common.js', 
       options: { 
        browserifyOptions: { 
         debug: true 
        }, 
        transform: [ 
         ["babelify", { 
          "presets": ["es2015"] 
         }] 
        ] 
       } 
      } 
     }, 
     watch: { 
      scripts: { 
       files: ["./js/**/*.js"], 
       tasks: ["browserify"] 
      } 
     } 
    }); 
    grunt.loadNpmTasks('grunt-browserify'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
}; 

C'est karma.conf.js

module.exports = function(config) { 
    config.set({ 

     basePath: '', 
     frameworks: ['browserify', 'jasmine'], 
     browsers: ['Chrome'], 
     files: [ 
      'js/**/*.js', 
      'tests/**/*.js' 
     ], 

     exclude: [], 

     preprocessors: { 
      'js/**/*.js': ['browserify'], 
      'tests/**/*.js': ['browserify'] 
     }, 

     browserify: { 
      debug: true, 
      transform: ['babelify'] 
     }, 
     reporters: ['progress', 'html'], 

     // the default configuration 
     htmlReporter: { 
      outputDir: 'karma_html', // where to put the reports 
      templatePath: null, // set if you moved jasmine_template.html 
      focusOnFailures: true, // reports show failures on start 
      namedFiles: false, // name files instead of creating sub-directories 
      pageTitle: null, // page title for reports; browser info by default 
      urlFriendlyName: false, // simply replaces spaces with _ for files/dirs 
      reportName: 'report-summary-filename', // report summary filename; browser info by default 


      // experimental 
      preserveDescribeNesting: false, // folded suites stay folded 
      foldAll: false, // reports start folded (only with preserveDescribeNesting) 
     } 
    }); 
}; 

Ceci est mon package.json

{ 
    "author": "Yomn", 
    "name": "myapp", 
    "version": "0.0.0", 
    "scripts": { 
    "start": "node server.js", 
    "tests": "karma start" 
    }, 
    "devDependencies": { 
    "babel-core": "^5.0.0", 
    "babel-loader": "^5.0.0", 
    "babel-polyfill": "^6.26.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babelify": "^7.3.0", 
    "browserify": "^14.4.0", 
    "grunt": "^1.0.1", 
    "grunt-browserify": "^5.1.0", 
    "grunt-contrib-watch": "^1.0.0", 
    "jasmine": "^2.2.1", 
    "jasmine-core": "^2.2.0", 
    "karma": "^0.13.2", 
    "karma-browserify": "~3.0.2", 
    "karma-chrome-launcher": "^2.2.0", 
    "karma-html-reporter": "^0.2.7", 
    "karma-jasmine": "^0.3.5", 
    "karma-phantomjs-launcher": "^1.0.4", 
    "karma-webpack": "^1.6.0", 
    "phantomjs-prebuilt": "^2.1.15", 
    "webpack": "^1.8.4" 
    } 
} 

Answer 1

J'ai essayé de l'exécution du projet avec votre configuration, mais puisque vous n'avez pas fourni des exemples de fichiers, je dessinai mon exemple qui fonctionne. J'espère que ce sera utile.

js \ Circle.js:

class Circle { 
    constructor(x, y, radius) { 
     this.x = x; 
     this.y = y; 
     this.radius = radius; 
    } 
} 

exports.Circle = Circle; 

Tests \ Circle.js:

var Circle = require('../js/Circle'); 

describe('Circle',() => { 
    describe(`constructor`,() => { 
     it(`should initialize properties correctly`,() => { 
      const circle = new Circle.Circle(1, 2, 3); 
      expect(circle.x).toBe(1); 
     }); 
    }); 
}); 

commande start Karma: "node_modules\.bin\karma" start --no-single-run