Setting up the javascript unit testing environment

In the beginning there was a function and called it in one place. Then we wanted to call her in another place with new features and updated her. We liked this ff so much that we called it in third place and still made functional edits and ... in the first place something went wrong. How to find out? Check in all places where we used this function, does everything work correctly? It is possible, but it is better to use unit tests.


image


Hello. Connected anonymous from the sandbox. You can find the correct way to test your code in the first lines of the search engine, but you have to tinker with setting up the environment. So today I want to help novice developers set up the environment for unit testing their code.


PS - it makes sense to read the article further if the reader has mastered working with npm or a similar package manager.

Let's start with small definitions:


  • unit testing is a technology whose purpose is to reduce the likelihood of errors and side effects (when another bug is introduced when fixing one bug).
  • karma is a tool that allows you to run java-script tests in browsers.
  • jasmine is a framework for testing javasctript code.

The Karma installation instructions (like many others) say that packages should be installed locally in the project.


# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

For convenience, we can also install karma-cli globally npm install -g karma-cli, otherwise commands will be available from the terminal like this ./node_modules/karma/bin/karma.


Then we can create a configuration file:


karma init karma.conf.js

  • First, we will be asked the used testing framework. (jasmine)
  • Do we use the file / module loader Require.js. ( Not )
  • Which browsers we want to view (Chrome)
  • What files are we listening to. (* [Ss] pec.js)
  • Should any files be excluded
  • Should I monitor test changes (yes)

After answering the questions, we will have a configuration file.


configuration file
// Karma configuration
// Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 (зима))
module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],
    // list of files / patterns to load in the browser
    files: [
      '*[Ss]pec.js'
    ],
    // list of files / patterns to exclude
    exclude: [
    ],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

Create another test file.


Test file
// test.spec.js
describe("A suite is just a function", function() {
  var a;
  it("and so is a spec", function() {
    a = true;
    expect(a).toBe(true);
  });
  it("and so is a spec", function() {
    a = true;
    expect(a).toBe(false);
  });
});

We can already see how our test works by running the team karma start karma.conf.js, but I recommend to wait a bit and make additional add-ons.


Install a package npm i -D karma-jasmine-html-reporterthat dynamically displays test results in a browser. Let's add karma config:


...
reporters: ['progress', 'kjhtml'],
client: {
  clearContext: false // leave Jasmine Spec Runner output visible in browser
},
...

Now we are all set. We launch karma start karma.conf.jsand proceed to our first test: D


Also popular now: