2017-09-03 130 views
-1

我一直在使用像ember/angular这样的框架构建普通的js应用程序。它们已经包含了一切用于编译和测试的内容。用业力/茉莉花写作测试

我开始在香草js中构建一个应用程序。我在es6中编写代码。

我开始测试使用业力/茉莉花。我被困在配置中。我阅读了几篇文章,并取得了一些成功,但又陷入了业力浏览器中的相对错误。 ERROR [framework.browserify]: Error: Cannot find module

我该如何用karma/jasmine编写测试。要使用什么?的WebPack/browserify?

我的应用程序的结构是: app/js/**/*.jsapp/tests/**/*.jsapp/css/**.cssapp/index.htmlapp/Gruntfile.jsapp/karma.conf.jsapp/package.jsonapp/server.js

这是我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'); 
}; 

这是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) 
     } 
    }); 
}; 

这是我的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" 
    } 
} 
+0

SO不是教程或正在进行的问题的平台。这就是你问一个关于可以回答的具体问题的具体问题的地方。你的问题太广泛了。 – Rob

回答

0

我试着与你的配置下运行的项目,但因为你没有提供这些文件的例子,我勾勒出我的例子工程。我希望它会有用。

JS \ Circle.js:

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

exports.Circle = Circle; 

测试\ 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); 
     }); 
    }); 
}); 

噶启动命令:"node_modules\.bin\karma" start --no-single-run