简单 Karma + Typescript 配置 - 参考错误:x 未定义

2024-02-08

我想使用 Karma 设置一个基本的测试运行程序来测试 Typescript 类。

当我运行测试时karma start,我收到错误ReferenceError: Calculator is not defined.据推测,karma 运行程序可能不会导入已转译的源代码,或者预处理器不会转译源代码。

我的来源是在回购协议中 https://github.com/monkeyhouse/KarmaTypescriptConfigQuestion与下面的相关部分。我怎样才能让配置工作/我缺少什么?

我目前的理解是,转换器和业力“文件”配置属性将为我加载计算器类。



transpiler => lib/calculator.ts => lib/calculator.ts
files => okay, loading lib/**/.js  

/lib/计算器.ts

export class Calculator{
  add ( a : number , b : number) : number {
    return a + b;
  } 
}

/测试/计算器.test.js

describe('Demo Test Runner', function() {
  var calc = new Calculator();
  it('should return 3 for 1 + 2', function() {
   expect( calc.add(1,2) ).toBe(3);
  });
});

包.json

...
"devDependencies": {
  "jasmine-core": "^2.5.2",
  "karma": "^1.3.0",
  "karma-chrome-launcher": "^2.0.0",
  "karma-jasmine": "^1.0.2",
  "karma-typescript-preprocessor": "^0.3.0"
}

karma.conf.js

module.exports = function(config) {
 config.set({

 ...
 frameworks: ['jasmine'],

 files: [
    'lib/**/*.js',
    'test/**/*.js'
  ],


 preprocessors: {
   '**/*.ts': ['typescript']         
 },


 typescriptPreprocessor: {
    // options passed to the typescript compiler 
    options: {
      sourceMap: true, // (optional) Generates corresponding .map file. 
      target: 'ES5', // (optional) Specify ECMAScript target version: 'ES3' (default), or 'ES5' 
      module: 'amd', // (optional) Specify module code generation: 'commonjs' or 'amd' 
      noImplicitAny: true, // (optional) Warn on expressions and declarations with an implied 'any' type. 
      noResolve: true, // (optional) Skip resolution and preprocessing. 
      removeComments: true, // (optional) Do not emit comments to output. 
      concatenateOutput: false // (optional) Concatenate and emit output to single file. By default true if module option is omited, otherwise false. 
    },
    // transforming the filenames 
    transformPath: function(path) {
      return path.replace(/\.ts$/, '.js');
    }
 }
 ...

由于您将计算器定义为

export class Calculator{...}

这意味着您的/lib/calculator.ts是一个模块,它的类需要由其他模块导入才能可见(它们不是全局的)。

So your /test/calculator.test.js需要以某种方式导入这个模块。如何执行此操作取决于您的模块配置tsconfig.json

在你的情况下,你可能想使用"module" : "commonjs" or "module": "amd".

但是,您将需要一个额外的 karma 插件才能加载这些模块。如果你使用amd然后像karma-requirejs,如果你使用commonjs你可能需要类似的东西karma-webpack。然后您需要使用必要的语法将其导入您的 js 文件中(例如var MyCalculator = require('/lib/calculator');)

您的另一个选择是不“导出”您的Calculator班级。这将使其在全球范围内可用。但是,您确实应该尝试让模块方式工作,因为这是大型应用程序中推荐的方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

简单 Karma + Typescript 配置 - 参考错误:x 未定义 的相关文章

随机推荐

  • ASP .NET MVC 3 - 如何提交嵌套在 html 表单中的 ajax 表单

    我有一个 ASP NET MVC 3 项目 并且我的 创建 视图之一存在问题 我有使用 ajax 表单实现的级联下拉字段 粗略地说 该视图是这样的 using Html BeginForm Html MyDropDown1 using Aj
  • 在 Linux 上安装 nloptr

    我正在尝试安装 R 包nloptr在没有互联网连接的 CentOS Linux 机器上 如下所示 install packages home ravi nloptr 1 0 4 tar gz repos NULL type source 该
  • 函数内声明的 const 数组是否存储在堆栈中?

    如果这是在函数中声明的 它会在堆栈上声明吗 它是 const 让我想知道 void someFunction const unsigned int actions 8 e1 e2 etc 是的 它们在堆栈上 您可以通过查看此代码片段来了解这
  • SAP B1,如何显示从 ItemImage 获取的图像?

    我正在从 SAP B1 服务层获取图像 在邮递员中 我可以将其视为image png 但显示它时出现问题 正确的显示方式是什么 img require fetchedImage 不起作用 我创建了一个云函数来获取图像并将其传递给客户端 但我
  • 以编程方式设置 LinearLayout 分隔线大小

    我已经尝试了多种解决方案 但似乎没有一个有效 我目前正在使用以下Drawable作为分隔线 这是水平示例 但相同的方法也适用于垂直 将高度切换为宽度 LinearLayout linearLayout set with findViewBy
  • 使用 ?与 sed

    我只想获取可能经过 gzip 压缩或未经过 gzip 压缩的文件的编号 但是 sed 中的正则表达式似乎不支持 这是我尝试过的 echo file 1 gz sed n s gz 1 p 并没有返回任何东西 然后我添加了一个 到正在分析的字
  • Julia:矢量化代码与非矢量化代码

    据我了解 Julia 应该使 for 循环更快 并且与矢量化操作一样快 我编写了一个简单函数的三个版本 该函数使用 for 循环与矢量化操作与后者使用 DataFrame 来查找距离 x rand 500 y rand 500 a rand
  • YouTube 数据 API 每日最大查询配额已降至 0,且无法设置任何数字

    我们的项目每天的查询配额限制突然降至 0 Google 没有任何解释 我们正在为我们的项目使用 YouTube Data API 并且即将发布该应用程序 因此我们要求 YouTube 增加每天的查询配额限制 然而 三天后就降为0 没有任何明
  • ag-grid 使用单个 gridOptions 在同一页面中多个实例

    我在我的应用程序中使用 ag grid 我想在同一页面上使用具有两个网格的网格选项的相同实例 ag grid 仅渲染其中一个网格 而将另一个网格留空 这个 plnkr 显示了这个问题 http plnkr co edit 4rRNRGbUo
  • 在延迟加载模块中使用 Angular 组件

    我想在应用程序的多个部分中使用 Angular 组件 包括在延迟加载模块内的组件中 我不知道如何声明在惰性模块中使用它的组件 我将向您展示不同文件的一些相关部分 应用程序模块 ts import FpgTimeComponent from
  • Android Room Dao:按案例排序不起作用

    我有一个 Room 数据库 使用 Dao 来处理查询等 我使用静态 非实时数据 函数通过查询检索结果 当我手动硬编码 Order By 值和列时 一切正常 如下所示 但是在传递参数时到 Dao 进行排序时 Order By 恢复为默认值 按
  • Android,如果内容已经下载到ListView中,如何停止再次读取getView()函数

    我是一个 Android 新手 我有一个 ListView 在 ListView 的每个元素上显示图像 它工作正常 但是当我开始滚动时 我意识到如果我的图像显示在我的手机设备的屏幕上 我会再次下载它 我怎样才能停止重新加载 ListView
  • 如何查看HashMap中键的分布?

    使用哈希映射时 将键均匀分布在存储桶上非常重要 如果所有键最终都在同一个存储桶中 那么您最终会得到一个列表 有没有一种方法可以 审核 Java 中的 HashMap 以查看键的分布情况 我尝试对其进行子类型化并迭代Entry
  • 如何编译Boost.Process库?

    所以有Boost Process 2006 http www netbsd org jmmv process 和最近的通过查看来源 Boost Process 看起来像是 2009 年 http www highscore de boost
  • WPF 几何(路径)部分填充的形状

    这个想法是获得评级控制 其值可以是 0 3 并将其绘制为部分填充的形状 CodeProject 文章中描述了我使用的方法 有Path 添加蒙版 矩形 添加轮廓 使用的原始代码Margin对于掩码和固定宽度路径 问题是使用矩形作为蒙版会重新绘
  • WPF ListBox 将 ItemsSource 与 MVVM-light 绑定

    XAML
  • 我的应用程序可以收到有关 Google 云端硬盘文件夹中的文件更新的通知吗?

    我希望每当在我的 Google Drive 目录 或子目录 上添加 删除或修改文件时 我的应用程序都会收到通知 Google Drive 是否支持网络钩子或类似的第三方集成机制 我在 API 文档中找不到类似的内容 提前致谢 我们现在支持针
  • 使用实体框架,代码优先,无自动增量

    public class Movie public int Id get set Required StringLength 255 public string Name get set public virtual IList
  • 将 Neo4j 子图加载到 Networkx 中

    我一直通过 python 的 Bulbflow 处理 Neo4j 现在需要一种保存 导出子图的方法 我见过 Java 甚至 Ruby 方法来做到这一点 但是简单的 Python 方法似乎对我隐藏着 到目前为止 我已经找到了两条可能的路径 访
  • 简单 Karma + Typescript 配置 - 参考错误:x 未定义

    我想使用 Karma 设置一个基本的测试运行程序来测试 Typescript 类 当我运行测试时karma start 我收到错误ReferenceError Calculator is not defined 据推测 karma 运行程序