如何对 aurelia 模块进行单元测试？答案

【问题标题】：How to do unit testing on an aurelia module?如何对 aurelia 模块进行单元测试？
【发布时间】：2018-04-13 15:17:19
【问题描述】：

我正在尝试对 aurelia 组件的自制 NPM 模块进行单元测试。请注意，这不是 aurelia 应用程序，它只是组件和类的存储库！

为此，我尝试复制aurelia-dialog 的设置，但我仍然有一些问题确实阻碍了我以一种有用的方式通过单个测试...

非常感谢！

【问题讨论】：

【解决方案1】：

复制aurelia-dialog 设置可能无济于事，因为它不再有任何 html 文件。他们在 typescript 源代码中内联了 html，以使消费者更容易捆绑（也可能更容易测试......）

Karma 的速度仅与您集成的捆绑器/转译器一样快，当然这取决于您加载的文件数量。仔细检查您是否没有包含/提供不需要的文件：
- 您需要包含+观看src 和test 文件夹
- 您应该包括node_modules 和其他部门，但不观看他们
- 应排除任何其他内容，例如构建资产/脚本、自定义类型
总是有一个模块加载器处理这些来自应用程序内部的文件请求。他们生活在“虚拟”路径中。当您直接从浏览器请求文件时，您会绕过这一点并请求可能不存在（或未提供）的内容，即使您的应用可以访问它。
加载像 jQuery（或 Bluebird 等）这样的依赖项的方式与您通常在应用程序中执行的方式类似。从捆绑配置中直接引用 node_modules 文件夹中的路径。然后确保它是预先添加到您的捆绑包中，或者单独提供。在后一种情况下，只需在您的setup.ts 中添加import "jquery"。或者看看Bluebird是如何包含在我下面的建议中的。

如果速度是一个问题，我建议尝试将 karma 与 webpack 结合使用。这通常非常快（尤其是从 webpack 4 开始），并且极大地简化了额外资产的服务。

这个plugin skeleton 应该让您很好地了解这些不同的东西是如何协同工作的。

这里是一个如何配置karma with webpack的例子

然后添加用于测试的 html 资产，只需在ts-loader 下方添加html-loader 就像这样（如您所见here）：

    {
      test: /\.html$/,
      use: [{ loader: "html-loader" }]
    },

【讨论】：