Get Started with JS Testing

Your guide to running Javascript unit tests on BrowserStack Automate.

Note: All the code samples and files referred to in this guide can be found in our GitHub karma-browserstack-example repository.

Running your Javascript Unit tests on BrowserStack is simple. We can use different Javascript unit testing frameworks such as QUnit, Jasmine, Mocha, and others to write our first unit test. In this sample we are using QUnit.

Sample test case

We will write a sample test case using Qunit framework. Follow the below bash commands to set up your test environment:

Command Line
# Create a new directory for the tutorial
$ mkdir browserstack_js_unit_test
$ cd browserstack_js_unit_test

# Install Qunit. Remove -g if you don't want to install it globally.
$ npm init
$ npm install -g qunit

Once we have set up the environment, create a file odd.js in a src directory. Use the below code:

src/odd.js
module.exports = function isOdd(val) {
    return val % 2 === 1;
}

Now that we have our source code, let’s add a few unit test cases for it.

Create a file test.js in a tests directory. The unit test checks if a number is odd or not. Use the below code:

tests/test.js
const isOdd = require('../src/odd.js')
QUnit.test("is 1 odd", function( assert ) {
  assert.ok(isOdd(1), 'One is an odd number');
});

QUnit.test("is 2 odd", function( assert ) {
  assert.notOk(isOdd(2), 'two is an even number');
});

To run the tests, run the below command from the root directory:

Command Line
qunit tests

You can see the result in your terminal. Now that we have written the test case, we are ready to run this Javascript unit test on BrowserStack.

Run sample test case on BrowserStack

We will use Karma to run the above sample test cases on BrowserStack. Install the following dependencies:

Command Line
$ npm install karma
$ npm install karma-qunit
$ npm install karma-browserstack-launcher

You also need to set the auth credentials of Automate so that the test runs are authenticated on BrowserStack. You can find these in the accounts page and in the Automate Dashboard.

Command Line
export BROWSERSTACK_USERNAME=YOUR_USERNAME
export BROWSERSTACK_ACCESS_KEY=YOUR_ACCESS_KEY

Create a file with name karma.conf.js in the root directory of the project, and use the below code

karma.conf.js
module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    frameworks: ['qunit'],

    //plugins
    plugins: ['karma-qunit', 'karma-browserstack-launcher'],

    // list of files / patterns to load in the browser
    files: [
      'src/*.js',
      'tests/*.js'
    ],

    // test results reporter to use
    reporters: ['progress', 'BrowserStack'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    logLevel: config.LOG_INFO,

    browserStack: {
      username: process.env.BROWSERSTACK_USERNAME,
      accessKey: process.env.BROWSERSTACK_ACCESS_KEY
    },

    // define browsers
    customLaunchers: {
      bs_chrome_windows: {
        base: 'BrowserStack',
        browser: 'chrome',
        browser_version: '72.0',
        os: 'Windows',
        os_version: '10'
      }
    },

    browsers: ['bs_chrome_windows'],
  })
}

Since we are including the source and test files in karma.conf.js files, change the odd.js code to not use export:

src/odd.js
function isOdd(val) {
    return val % 2 === 1;
}

Similarly, change the code test.js file:

tests/test.js
QUnit.test("is 1 odd", function( assert ) {
  assert.ok(isOdd(1), 'One is an odd number');
});

QUnit.test("is 2 odd", function( assert ) {
  assert.notOk(isOdd(2), 'two is an even number');
});

Trigger the test case by using the following command:

Command Line
./node_modules/karma/bin/karma

It will run the test on the BrowserStack browsers. You can check the status of your test on the Automate Dashboard.

Next Steps

We're sorry to hear that. Please share your feedback so we can do better






Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback