Setting the unit testing environment javascript

At first there was a function and called it in one place. Then we wanted to call her in another place with new features and updated it. We liked this function so much that we called it in the 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.

Hello. In connection anonymous from the sandbox. How to test your code, you can find in the first lines of the search engine, but you have to tinker with setting the environment. So today I want to help novice developers set up an 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 that aims 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 (as well as many others) say that packages should be installed locally in a 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 globally install karma-cli npm install -g karma-cli , otherwise from the terminal the commands will be available as ./node_modules/karma/bin/karma .

Then we can create a configuration file:

 karma init karma.conf.js 

• At first, we will be asked to use the framework for testing. (jasmine)
• Do we use the file / modular loader Require.js. ( Not )
• What browsers we want to view (Chrome)
• What files we listen to. (* [Ss] pec.js)
• Whether to exclude any files
• Whether to monitor test changes (yes)

After answering the questions, we will have a 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.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 karma start karma.conf.js , but I recommend waiting a bit and making additional add-ins.

Install the npm i -D karma-jasmine-html-reporter package, which dynamically displays the test results in the browser. Let's add karma config:

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

Now we have everything ready. We karma start karma.conf.js and proceed to our first testing: D