Javascript TypeScript：如何测试客户端代码？

当我在浏览器TS代码中编写测试时，遇到了以下问题。我的“测试”代码文件与“应用”代码文件位于一个单独的文件夹中（我不愿意放弃这种安排）。因此，为了导入我的“应用程序”模块，我必须执行以下操作：

    // tests/TS/SubComponent/Module.Test.ts
    import m = module("../../Web/Scripts/SubComponent/Module");

这个编译得很好。但当加载到浏览器中时，它显然无法工作，因为从浏览器中运行的RequireJS的角度来看，模块位于“app/SubComponent/module”（通过web服务器和RequireJS配置重新映射后）

在TS 0.8.3中，我能够成功，但在0.9.0中，它不再工作，因为现在编译器

所以问题是：如何测试客户端代码？

---

显然，我不可能是唯一一个这样做的人，对吗？：-）

我不知道您是否正在使用Visual Studio-下一部分是特定于Visual Studio的

我就是这样做的：

在我的测试项目中，我创建了一个名为“ReferencedScripts”的文件夹，并 引用了正在测试的项目中的脚本（添加现有脚本） 项目>添加为链接）。设置要复制到输出文件夹的文件

来源：

使用“添加为链接”可以使脚本在测试项目中可用

---

不使用Visual Studio？我建议创建一个任务/作业/批处理文件，将这些文件复制到测试文件夹中。您甚至可以使用

tsc

为您完成此任务。

由于typescript代码被编译为Javascript，因此您可以使用所有Javascript测试框架

我用的是茉莉花：

您可以在此处使用.d.ts文件在Typescript中编写测试：

---

但是我的客户端代码非常小，并且编译成一个输出文件，所以我没有您描述的模块问题。

可能是我误解了您的问题-还不能评论

浏览器的运行时不需要任何类型脚本信息。因此，测试脚本应该以与所需的任何其他javascript文件相同的方式导入已编译的ts文件。可能是在运行脚本之前，必须将它们复制到测试项目的子文件夹中

我认为更大的问题是您没有接口信息。为什么要导入这些信息而不是引用它们？尤其是在浏览器中也会导入它们

该引用仅在IDE中发生，因此接口文件位于哪个文件夹中并不重要

/// <reference path="../../Web/Scripts/SubComponent/Module/References.ts" />

//
 > p>我正处于一个项目中，我必须将一部分大型JavaScript项目迁移到Type Script，这就是我设法保持测试运行的方式：

用于监视所有my
.ts
文件，并将其从源代码编译到
tmp
文件夹（及其源代码映射）。如果您只需要处理typescript文件，那么您也可以在watch模式下使用
tsc
。后者会更快，但前者允许我使用livereload同时编辑javascript和typescript文件

在
karma.conf
中包含
.ts
文件，但不要查看或包含它们：

// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,

  // ...

  // We want the *.js to appear in in the window.__karma__.files list
  { pattern: 'app/**/*.ts', included: false, watched: false, served: true },

  { pattern: 'app/**/*.js', included: false },

  // We do watch the folder where the typescript files are compiled
  { pattern: 'tmp/**/*.js', included: false }, 

  // ...

  // Finally, the test-main file.
  'tests/test-main.js'
];


最后，在
test main.js
文件中，我将typescript文件的名称弄乱，并在
test main.js
中将它们声明为require模块，其路径正确（指向相应的
.js
文件）：

var dynPaths = {
      'jquery'               : 'lib/jquery.min',
      'text'                 : 'lib/text'
  };

var baseUrl = 'base/app/',
    compilePathUrl = '../tmp/';

Object.keys(window.__karma__.files)
    .forEach(function (file) {
        if ((/\.ts$/).test(file)) {
            // For a typescript file, include compiled file's path
            var fileName = file.match(/(.*)\.ts$/)[1].substr(1),
                moduleName = fileName.substr(baseUrl.length);
            dynPaths[moduleName] = compilePathUrl +
                                    fileName.substr(baseUrl.length);
        }
    });

require({
  // Karma serves files from '/base'
  baseUrl: '/' + baseUrl,
  paths: dynPaths,
  shim: { /* ... */ },

  deps: [ /* tests */ ],

  // start test run, once requirejs is done
  callback: function () {
      window.__karma__.start();
  }
});


然后，当我编辑typescript文件时，它们被编译并作为javascript文件放入
tmp
文件夹中。这些触发了karma的自动监视，它会重新运行测试。在测试中，
require
调用正确解析，因为我们已经显式覆盖了typescript文件的路径

我意识到这有点不对劲，但在尝试使用
REQUIRE\u ADAPTER
包含所有测试时，我不得不跳过类似的障碍。所以我认为没有更干净的方法

希望，如果typescript变得更加流行，我们将看到更好的测试支持。
因此，我最终做了以下工作：事实证明，Karma可以处理/监视/服务不在基本目录中的文件，并使它们以“/absolute/C:/dir/folder/blah/file.js”的形式查看浏览器。每当文件->模式以“。/开头时，就会发生这种情况

此功能可用于使RequireJS完全按照文件系统上的目录结构查看整个目录结构，从而允许测试以“。/../Web/app/Module.ts”的形式导入应用程序模块

参考资料（0.8版）：
我不明白这有什么帮助。TypeScript编译器并不关心“作为链接”添加到项目中的文件，它只关心它们在文件系统中的位置。而且我不能在事后将文件复制到测试文件夹中，因为这样我就不会在编写测试时使用intellisense和save编译@我认为这应该会有所帮助，因为typescript会认为文件与测试位于同一个项目中。实际上，它们只是真实文件的“幽灵”。你至少试过了吗？@tengiz，是的，我试过了，TypeScript不在乎文件是否在项目中，它只在文件系统上显示。你可能错过了文章中的注释：
将文件设置为复制到输出文件夹
。这将确保脚本将其设置为本地非相对路径。以下内容简明扼要地摘自TypeScript：
…选择所有这些内容并更改其属性，以将“复制到输出目录”设置为“始终复制”。这将导致脚本文件在生成测试项目时放置在该项目的bin目录中。当您在生成系统下运行时，这是必需的，因为它可能会在特殊的目录结构中生成您的项目，并且相关路径将被破坏。
@SteveFenton，在生成上复制应用程序文件将阻止
files = [
  // App files:
  { pattern: '../../Web/App/**/*', watched: true, served: true, included: false },

  // Test files:
  { pattern: '../js/test/**/*.js', watched: true, served: true, included: false }
];