Skip to main content

Integrate your JS unit test frameworks

An explanatory guide to help you integrate your JS unit test frameworks.

Note: If you want to write your own test runner instead of choosing one from a list of supported runners, learn more about the JS testing API.

In the sample test case in Getting started section, we used QUnit unit testing framework, and ran the tests on BrowserStack with a simple integration.

Let’s examine the integration closely to understand the key steps involved in this guide. If you already know how it works, see a list of all JS test runners that you can use to run your tests on BrowserStack.

Integrating your framework with BrowserStack is simple. The keys steps are:

  1. Install the right test runner for you
  2. Specify username and access key for authentication
  3. Configure the list of browsers and devices you want to test on
  4. Get the test reporting integrated so you can consume test results better

Choose a test runner

In the sample we ran earlier, we used Karma and ran the tests using Karma BrowserStack launcher

For those of you who don’t know what it is, Karma is a Javascript test runner. It launches an HTTP server and runs the javascript unit tests on a browser. Karma supports most unit testing frameworks. Please refer Karma website on how to install and setup Karma. You will need to install a plugin specific to your testing framework.

Karma BrowserStack launcher integrates with Karma and runs your Javascript unit test cases on BrowserStack Automate platform.

To use the test runner (in this case, karma-browserstack-launcher), you’ll have to install it.

Command Line
# Install karma-browserstack-launcher
npm install karma-browserstack-launcher --save-dev

Authentication with BrowserStack

Each of the supported test runners will have an option to specify your username and access keys so that the test runs are automatically authenticated.

For example, while using karma-browserstack-launcher, you can update your karma.conf.js file with BrowserStack username and access key.

karma.conf.js
module.exports = function(config) {
  config.set({
   // global config of your BrowserStack account
   browserStack: {
     username: 'YOUR_USERNAME',
     accessKey: 'YOUR_ACCESS_KEY'
   }
   ...
 })
 ...
}

Configure the list of browsers and devices

In the runner config, you will have an option to specify the list of browsers, OS and devices that you can run your JS unit tests on. Refer list of browsers and platforms for a complete list of desktop browsers and devices for javascript unit testing.

Refer the below code on how to configure desktop browser and devices if you’re using karma-browserstack-launcher.

karma.conf.js
module.exports = function(config) {
  config.set({
    // global config of your BrowserStack account
    browserStack: {
      username: 'YOUR_USERNAME',
      accessKey: 'YOUR_ACCESS_KEY'
    },

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

      bstack_iphoneX: {
        base: 'BrowserStack',
        device: 'iPhone X',
        os: 'ios',
        real_mobile: true,
        os_version: '11.0'
      }
    },

    browsers: ['bstack_chrome_windows', 'bstack_iphoneX'],
  })
}

Learn more about configuring browsers & devices and organizing your test runs

Test reporting

All your JS test results are available on the Automate Dashboard. To make the most of the test reporting on the dashboard, build your custom reporting you can use the reporters option in the test runners where available.

For example, in the Karma test runner, you can configure the karma.conf.js file so that test status is automatically marked as pass / fail on BrowserStack so that the test reporting can also contain the test status. To achieve this, you’ll need to add BrowserStack to the reporters section.

karma.conf.js
module.exports = function(config) {
  config.set({
    // The rest of your karma config is here
    reporters: ['dots', 'BrowserStack']
  })
}

That’s all there is! You can now run your JS unit tests on BrowserStack.

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

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy