如何编写支持 Javascript 6 模块的单元测试答案

【问题标题】：How to write unit tests supporting Javascript 6 modules如何编写支持 Javascript 6 模块的单元测试
【发布时间】：2018-01-26 17:12:56
【问题描述】：

我的 Javascript 代码库基于新的 ES6 Modules。

所以我有这样的 Javascript 文件，例如：

export class MyClass {
  constructor() {
    this.list = [];
  }

  add(el) { this.list.push(el); }
}

作为一个模块，我将此文件导入到其他 Javascript 文件中，如下所示：

import * as lists from "./myclass";

在 HTML 页面中，必须使用以下语法：

<script src="myclass.js" type="module"></script>

单元测试

我需要一个框架来测试我的代码。问题是我使用的是 Javascript 6 模块，所以像 karma 这样的现代框架在导入文件时存在问题，而不是作为模块：

module.exports = function(config) {
  config.set({
    files: [
      'src/**/*.js',
      'test/**/*.js'
    ],
    ...
  })
}

以上是karma.conf.js 的示例。在 Karma 的特定情况下，runner 不会将文件作为模块导入，因此页面注入失败。

我可以使用哪些单元测试框架来测试 Javascript 6 模块？

【问题讨论】：

【解决方案1】：

我正在使用 Mocha 和 Babel 的组合 - Babel 将 ES6 模块转换为 Mocha 可以使用的代码，因此您可以在测试文件中使用 import。

使用 Babel 转译器运行 mocha：

mocha --compilers js:babel-core/register --recursive test/*

我很确定其他框架也有类似的解决方案。

【讨论】：

【解决方案2】：

您可以查看Jest，它是 Facebook 的测试框架，可让您在 Node 上运行测试（使用 JSDOM）。

它在没有浏览器的情况下并行运行您的测试，因此假设要快得多。

【讨论】：

完美运行！
嘿@Andry，很高兴你成功了。你能详细说明你做了什么来让它工作吗？当我在尝试测试我的 ES 模块时遇到问题时，我从 Jest 开始并切换到 Mocha。我以为我必须使用 Babel 等。使用 Mocha 我找到了 ESM 库并希望使用“mocha 'lib.test.js' --require esm'，因为我看到了使用此解决方案的博客文章，但它对我不起作用。博文：alxgbsn.co.uk/2019/02/22/testing-native-es-modules-mocha-esm
@AndrewCastellano 嘿伙计，这是前段时间，我删除了项目，所以我不记得了:(

【解决方案3】：

我不确定 Jest 是否真的支持模块，对吧？ IE。我希望我的测试文件 .. 那些带有断言 .. 的文件能够导入同时导入其他模块的模块。

似乎你可以用基于节点的测试框架做的最好的，我认为可能是所有这些，是我们非常糟糕的 babel/webpack 特技，我真的不想使用。

Headless Chrome 当然看起来很有趣，Puppeteer 也是如此

【讨论】：

顺便说一句：我目前的解决方案是：我的 repo 使用 Rollup 创建三个“包”：IIFE（用于脚本标签）、es6（用于我所有“子模块”的单文件模块），和一个用于节点的 .cjs (commonJS) 包。我只是使用后者进行测试。但是另一个 repo 确实需要浏览器测试，所以我将查看上面的两个 url。