Cross platform testing using Karma.

What am I working on?

The last 2-3 weeks I have been working on Pull Requests for my Open Source class at Seneca College. Previously, during Hacktoberfest I contributed to a tool called toad-scheduler which is an in-memory NodeJS scheduling tool.

In this tool, I helped fix a bug about setInterval() limit throwing an error with anything over than 24.5 days. During this PR, I had to write a test using Jest framework to handle the long intervals and make sure it was firing the task correctly.

Different types of tests

For my next PR, I wanted to work on the tool again with Igor Savin. I asked him what I could do to help this time around. One of the options he mentioned was adding Browser based testing using Headless Chrome.

I asked him why exactly we needed to do that considering there was already a full suite of Jest tests. His answer was that it was to prevent any "Node specific" functionality from creeping in to the code. This means we have to make sure the code works on any platform (command line, browser, etc).

Browser Testing With Karma

Setting up Karma is actually quite straightforward thanks to the documentation and provides step by step instructions on installation, and configuration. Furthermore, I used this Google Dev Article about headless chrome setup.

Since my task was the initial setup and writing a basic test, the test I decided to use in my Karma setup is:

describe('a simple Karma test', () => {
  it('should equal 2', () => {
    expect(1 + 1).toBe(2)
  })
})

Commit Links

Interesting note about Jest & Karma

However, because Jest is built on top and mostly compatible with Jasmine (which Karma is built on top of), the creator Igor had the idea to use the already predefined Jest tests but make them platform neutral. Take the Jest specific functions, and change them to be the Jasmine counterpart so that Karma can also run the tests originally made for Jest.

An example of changing the functions is when advancing timers:

How to run your tests?

After following the setup for creating a karma.conf.js and installing Karma with npm you should be ready to write a basic test as I did above. Create a folder for your tests. Next, create a file with .js or .ts extension. Inside your test file, copy paste the it/describe() from above.

In the config file, in the "files" property, add the correct path to your test folder so Karma can find the test files. For us it was just called "test":
files: [{ pattern: 'test/**/*.ts' }, { pattern: 'lib/**/*.ts'}]

Package.json script

Inside package.json under the scripts, add a new "test:karma" property or whatever name you prefer and set the value to the Karma test command like so:
"test:karma": "karma start --single-run --browsers ChromeHeadless karma.conf.js"

After saving and running npm run test:karma on the command line it should run your test file.

Note

An error I ran into doing this would be eslint environment property needing "browser":true. In some cases if you don't do this, it will not recognize export-default and cause an error with Karma in the command line.

What I learned

I learned a lot about cross compatibility testing, and how to make multiple testing tools work together. It was interesting seeing the differences and also similarities between Jest/Jasmine/Karma.

They all are related in some way so it was funny seeing that we didn't even need to write any more tests, just import the ones from Jest and change the functions to be Jasmine ones which Jest is able to understand too.

I hope that helps someone get Karma tests up and running in their application!!!

Thanks for reading.

Andre