Chrome Browser Test with Karma

Karma test runner with Headless Chrome

Photo by Sarah Louise Kinsella on Unsplash

1. Init and install packages
2. Create karma.conf.js
3. Create a test, my-test.spec.js, which requires a browser
4. Run Karma tests

Init and install packages

$ npm init -y
$ npm i chai karma karma-chai karma-chrome-launcher karma-mocha mocha -D
$ cat package.json
{
  "name": "karma-with-chrome",
  "devDependencies": {
    "chai": "^4.3.7",
    "karma": "^6.4.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.1",
    "karma-mocha": "^2.0.1",
    "mocha": "^10.2.0"
  }
}

Create karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'chai'],
    files: ['*.spec.js'],
    browsers: ['ChromeHeadless'],
    singleRun: true,
  })
}

Create a test, my-test.spec.js, which requires a browser

describe("MyTest", () => {
  it("should create a DIV", () => {
    expect(document.querySelector('.my-test-div')).to.be.null;

    const divEl = document.createElement('div');
    divEl.classList.add('my-test-div')
    document.body.appendChild(divEl);
    expect(document.querySelector('.my-test-div')).not.to.be.false;
  });
});

Run Karma tests

$ karma start
22 03 2023 13:20:10.479:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
22 03 2023 13:20:10.480:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
22 03 2023 13:20:10.483:INFO [launcher]: Starting browser ChromeHeadless
22 03 2023 13:20:11.214:INFO [Chrome Headless 111.0.5563.64 (Mac OS 10.15.7)]: Connected on socket ZpeEMFR52ICMWR1eAAAB with id 93050596
Chrome Headless 111.0.5563.64 (Mac OS 10.15.7): Executed 1 of 1 SUCCESS (0.002 secs / 0.001 secs)
TOTAL: 1 SUCCESS

I wish the above bulletin-style style instrucrion would be enough to run your first Karma + Chrome browser test. If unclear, please leave me a message.

Happy coding

Allen Kim