Get Started with JS Testing
Your guide to running Javascript unit tests on BrowserStack Automate.
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:
# 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:
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:
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:
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:
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.
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
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:
function isOdd(val) {
return val % 2 === 1;
}
Similarly, change the code test.js
file:
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:
./node_modules/karma/bin/karma start
It will run the test on the BrowserStack browsers. You can check the status of your test on the Automate Dashboard.
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
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
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!