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

How to do unit testing on an aurelia module?

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

的存储库

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

  1. karma 启动极其缓慢：第一次测试运行前将近 1 分钟
  2. html 尽管组件模板由 jasmine 加载，但它们未提供给客户端：浏览器请求时我收到 404，但 karma 控制台输出显示文件已加载
  3. 不幸的是，我不得不使用 jquery 作为 npm 依赖项，我找不到如何为 jasmine 加载它，这使得甚至无法加载使用它的组件...

非常感谢！

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

  1. Karma 仅与您集成它的 bundler/transpiler 一样快，当然取决于您加载的文件数量。仔细检查您是否没有 including/serving 不需要的文件：

    • 您需要包含并观看 src 和 test 文件夹
    • 你应该包括 node_modules 和其他部门，但 不 看他们
    • 任何其他内容，例如构建 assets/scripts，应排除自定义类型

  2. 始终有一个模块加载器处理这些来自您的应用程序内部的文件请求。他们住在 "virtual" 条路上。当您直接从浏览器请求文件时，您将绕过此请求并请求可能不存在（或未提供）的内容，即使您的应用可以访问它。

  3. 加载依赖项，如 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" }]
    },

免责声明：我是上述插件框架的作者