Question

我一直在尝试为某些模块化ES6代码添加单元测试。我有一个这样的项目结构：

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

这是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;
}

现在，如果我通过在命令行中运行qunit来运行此示例测试，它将可以工作：

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);
});

但是，如果我尝试导入实际的cumsum函数，它将无法识别正确的ES6导入语法：

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);
});

我刚得到错误

SyntaxError：意外令牌{

是否可以将QUnit与ES6模块一起使用？如果没有，是否有一个单元测试框架可以让我测试这些模块？

Answer 1

这是到目前为止我要提出的。

Chrome可以在本地运行ES6模块。对于Web生产而言，这还不够好，但足以运行一些单元测试。因此，在test文件夹中，我有index.html像这样：

<!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>

在test/tests.js中，我有原始的测试代码：

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);
});

现在，由于某些原因，您无法在网络浏览器中直接打开test/index.html，因为尽管Chrome可以在本地愉快地读取普通的javascript文件，但是如果您在本地文件上设置type="module"则会损坏。相反，我们必须启动Web服务器并以这种方式查看它。任何开发服务器都可以，所以webpack-dev-server可以正常工作。在Chrome中打开http://localhost:8080/test/，然后加载单元测试。

有人有更好的方法吗？ Node.js使用与Chrome相同的JavaScript引擎，因此从理论上讲，我认为应该可以从命令行执行此操作，而无需启动Web服务器和打开浏览器。

如何使用QUnit导入用于单元测试的模块

1 个答案: