Integrate your JS unit test frameworks

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

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.

# 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.

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.

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.

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

• Integrate your JS unit test framework
• Learn how to run your tests from a CI
• Run your tests in parallel to get faster feedback
• Explore the browsers and devices you can test on to gain confidence in your code
• See the list of all JS test runners you can use