如何使用 QUnit 导入模块进行单元测试答案

【问题标题】：How to import modules for unit tests with QUnit如何使用 QUnit 导入模块进行单元测试
【发布时间】：2019-07-14 18:12:50
【问题描述】：

我一直在尝试为一些模块化 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: Unexpected token {

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

【问题讨论】：

标签： javascript unit-testing qunit

【解决方案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 服务器并打开浏览器。

【讨论】：

你一针见血，这就是 Chrome 本身（完全）并不真正支持 ES6 模块。由于 qunit CLI 使用无头浏览器，它仍然是一个浏览器，也不支持 ES6 模块。