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.
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.
// 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 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-reporter
that 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.js
and proceed to our first test: D