Negligent Parachute Maintainers
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    webpack-karma-jasminepublic

    Installation

    This one package will let you use karma in your projects. Use npm install webpack-karma-jasmine instead of installing all dependencies and loaders separately.

    If you want to test your .html files with DOM see karma-html package.

    This package is the suggestion of karma configuretion. It uses:

    • karma-webpack and babel-loader to compile ES2015 javascript features and bundle specs and tests .js files together
    • karma-jasmine (to use another framework, install it manually)
    • karma-mocha-reporter bash reporter
    • karma-jasmine-html-reporter browser reporter

    The following dependencies will be installed:

    Package name
    webpack
    karma
    karma-webpack
    karma-jasmine
    jasmine-core
    karma-phantomjs-launcher
    karma-chrome-launcher
    karma-firefox-launcher
    karma-edge-launcher
    karma-ie-launcher
    karma-opera-launcher
    karma-safari-launcher
    karma-mocha-reporter
    karma-spec-reporter
    karma-jasmine-html-reporter
    karma-cli (globally)

    Configuration

    create karma.conf.js

    The suggestion of karma.conf.js configuration

    karma.conf.js
    module.exports = function(config) {
      config.set({
        //root path location to resolve paths defined in files and exclude 
        basePath: '',
        //files/patterns to exclude from loaded files 
        exclude: [],
        //files/patterns to load in the browser 
        files: [
          {pattern: 'src/*.js', watched:true, served:false, included:false, nocache:false},
          {pattern: 'tests/*.js',watched:true,served:true,included:true}
          /*parameters*/
              //watched: if autoWatch is true all files that have set watched to true will be watched for changes 
              //served: should the files be served by Karma's webserver? 
              //included: should the files be included in the browser using <script> tag? 
              //nocache: should the files be served from disk on each request by Karma's webserver? 
          /*assets*/
              //{pattern: '*.html', watched:true, served:true, included:false} 
              //{pattern: 'images/*', watched:false, served:true, included:false}       
        ],
        
        //executes the tests whenever one of watched files changes 
        autoWatch: true,
        //if true, Karma will run tests and then exit browser 
        singleRun:false,
        //if true, Karma fails on running empty test-suites 
        failOnEmptyTestSuite:false,
        //reduce the kind of information passed to the bash 
        logLevel: config.LOG_WARN, //config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG 
                                          
        //list of frameworks you want to use, only jasmine is installed automatically 
        frameworks: ['jasmine'],
        //list of browsers to launch and capture 
        browsers: ['Chrome'/*,'PhantomJS','Firefox','Edge','ChromeCanary','Opera','IE','Safari'*/],
        //list of reporters to use 
        reporters: ['mocha','kjhtml'/*,'dots','progress','spec'*/],
        
        //address that the server will listen on, '0.0.0.0' is default 
        listenAddress: '0.0.0.0',
        //hostname to be used when capturing browsers, 'localhost' is default 
        hostname: 'localhost',
        //the port where the web server will be listening, 9876 is default 
        port: 9876,
     
        //when a browser crashes, karma will try to relaunch, 2 is default 
        retryLimit:0,
        //how long does Karma wait for a browser to reconnect, 2000 is default 
        browserDisconnectTimeout: 5000,
        //how long will Karma wait for a message from a browser before disconnecting from it, 10000 is default 
        browserNoActivityTimeout: 10000,
        //timeout for capturing a browser, 60000 is default 
        captureTimeout: 60000,
     
        client: {
            //capture all console output and pipe it to the terminal, true is default 
            captureConsole:false,
            //if true, Karma clears the context window upon the completion of running the tests, true is default 
            clearContext:false,
            //run the tests on the same window as the client, without using iframe or a new window, false is default 
            runInParent: false,
            //true: runs the tests inside an iFrame; false: runs the tests in a new window, true is default 
            useIframe:true,
            jasmine:{
                //tells jasmine to run specs in semi random order, false is default 
                random: false
            }
        },
     
        /*karma-webpack config*/
        preprocessors: {
          //use webpack to support require() in test-suits .js files 
          //use babel-loader from webpack to compile es2015 features in .js files 
          //add webpack as preprocessor 
          './tests/*.js': ['webpack']
        },
        webpackMiddleware: {
          //turn off webpack bash output when run the tests 
          noInfo: true,
          stats: 'errors-only'
        },
     
        /*karma-mocha-reporter config*/
        mochaReporter: {
            output: 'noFailures'  //full, autowatch, minimal 
        }
      });
    };
    adjust the folders structure

    The configuration assumes that the following folder structure is arranged. Adjust basePath and excludes property, files pattern properties, and preprocessors properties to your need.

    ┌ karma.conf.js
    ├ src
    │  ├ file_a.js
    │  └ file_b.js
    └ tests
       ├ test_a.js
       └ test_b.js
    
    configure webpack webpack.config.js to compile .js files with babel

    Read the webpack-babel-installer docs to configure webpack.config.js file. You can use npm install webpack-babel-loader (or install all babel packages manually).

    Set the webpack.config.js
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude:/(node_modules)/,
          loader:"babel-loader",
          query:{
            presets:["env"]
          }
        }
      ]
    }
    The test-suits file example

    Require all .js files to be tested in your specs files. The karma-webpack will bundle all required files with test-suits files to be ready to run the tests.

    var getModule = require('./../src/some_module.js');
    describe("Module should return",function(){
      it("some number",function(){
        expect(getModule()).toEqual(10);
      });
    });

    Links

    Launchers
    Reporters

    See also

    install

    npm i webpack-karma-jasmine

    Downloadslast 7 days

    321

    version

    1.0.4

    license

    MIT

    last publish

    collaborators

    • avatar