CODEWITHSUNDEEP
javascriptunit-testingqunit
Matthew
Matthew

Reputation: 4339

How to import modules for unit tests with QUnit

I've been trying to add unit tests for some modular ES6 code. I have a project structure like this:

project
└───src
|   └───js
|           cumsum.js
|       index.js <--- entry point
└───test
        tests.js <--- QUnit test code

This is what's in cumsum.js:

export const cumsum=x=>{
    var result = x.reduce((r, a)=> {
        if (r.length > 0) {
            a += r[r.length - 1];
        }
        r.push(a);
        return r;
    }, []);
    return result;
}

Now, if I run this sample test by running qunit in the command line, it will work:

const A=[1,2,3,4,5];
const expected=[1,3,6,10,15];
QUnit.test( "cumsum", function( assert ) {
    assert.deepEqual([1,3,6,10,15],expected);
});

but if I try to import the actual cumsum function, it doesn't recognize proper ES6 import syntax:

import {cumsum} from '../src/js/cumsum';
const A=[1,2,3,4,5];
const expected=[1,3,6,10,15];
QUnit.test( "cumsum", function( assert ) {
    assert.deepEqual(cumsum(A),expected);
});

I just get the error

SyntaxError: Unexpected token {

Is there a way to use QUnit with ES6 modules? If not, is there a unit testing framework that will let me test these modules?

Upvotes: 3

Views: 1773

Answers (1)

Matthew
Matthew

Reputation: 4339

Here's what I've come up with so far.

Chrome can sort of natively run ES6 modules. It's not good enough for web production but it is enough to run some unit tests. So in the test folder I have index.html like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
  <script type="module" src="../src/js/cumsum.js"></script>
  <script type="module" src="tests.js"></script>
</body>
</html>

In test/tests.js I have the original test code:

import {cumsum} from '../src/js/cumsum';
const A=[1,2,3,4,5];
const expected=[1,3,6,10,15];
QUnit.test( "cumsum", function( assert ) {
    assert.deepEqual(cumsum(A),expected);
});

Now, for some reason you can't directly open test/index.html in the web browser because although Chrome will happily read ordinary javascript files locally it will break if you set type="module" on a local file. Instead we have to launch a web server and view it that way. Any dev server will do, so webpack-dev-server works fine. Open http://localhost:8080/test/ in Chrome and the unit tests load.

Does anyone have a better way of doing this? Node.js uses the same javascript engine as Chrome so in theory I think it should be possible to do this from the command line without launching a web server and opening a browser.

Upvotes: 1

Related Questions