RequireJS没有使用karma和typescript正确加载模块 [英] RequireJS not loading modules properly using karma and typescript

问题描述

我正在尝试使用karma / jasmine设置SPA的单元测试

首先，以下测试在业力中运行良好：

  ///< reference path =../../ definitions / jasmine / jasmine.d.ts/> 
 ///< reference path =../../ src / app / domain / core / Collections.ts/> 
 
 define（[app / domain / core / Collections]，（collections）=> {
 
 describe（'LinkedList'，（）=> {
 
 it（'应该能够存储字符串以供查找'，（）=> {
 var list = new collections.Collections.LinkedList< string>（）; 
 
 list.add（item1）; 
 expect（list.first（））。toBe（item1）; 
}）; 
}）; 
 }）; 
  

但是，集合的类型为任何因此我不能将它用于类型声明，因此我在编写测试时缺少intellisense等等。不好！<​​/ p>

当我尝试将测试重新编写为更适合TypeScript的格式时出现问题：

  ///< reference path =../../ definitions / jasmine / jasmine.d.ts/> 
 ///< reference path =../../ src / app / domain / core / Collections.ts/> 
 import c = require（./../../ src / app / domain / core / Collections）; 
 
 describe（'LinkedList'，（）=> {
 
 it（'应该能够存储查找字符串'，（）=> {
 var list：c.Collections.LinkedList< string> = new c.Collections.LinkedList< string>（）; 
 
 list.add（item1）; 
 expect（list。 first（））。toBe（item1）; 
}）; 
}）; 
  

这个编译得很好，我得到了我的类型信息，方便智能感知等，但现在业力引发错误。

事实证明它正在尝试加载模块而不是 .js后缀，由以下错误消息指示：

  / base / src / app / domain / core / Collections没有时间戳！ 
无法加载资源：服务器响应状态为404（未找到）
（http：// localhost：9876 / base / src / app / domain / core / Collections）
未捕获错误：脚本错误：/ base / src / app / domain / core / Collections 
  

我'我现在要停在这里，但如果有帮助我很乐意提供我的业力配置文件，test-main等等。但我希望有人之前遇到过这个问题，并且可能会指出我正确的方向。

我的打字稿是用AMD标志编译的。

解决方案

这不是TypeScript问题。我们遇到了同样的问题。事实证明，业力window。 __ karma __ .files数组包含测试中包含的所有文件，包括.js扩展。

现在，在提供.js扩展名时，requireJS不起作用。要修复它，在我们的 main-test.js 文件中，我们通过过滤所有* Spec.js文件创建了一个变量tests，然后我们删除了 .js ，因为requireJS需要它。更多信息： http://karma-runner.github.io/0.8/plus /RequireJS.html

以下是我们的做法（基于上面链接中提供的信息）：

main-test.js

  console.log（'========== ================================='）
 console.log（'====== ===========测试文件================'）
 
 
 var tests = Object.keys（ window .__ karma __。files）.filter（function（file）{
 return /\Spec\.js$/.test(file）; 
}）。map（function（file）{
 console.log（file）; 
返回file.replace（/ ^ \ / base \ / | \ .js $ / g，''）; 
}）; 
 
 console.log（'===================================== ======'）
 console.log（'================================= =========='）
 
 
 require.config（{
 baseUrl：'/ base'，
路径：{
 jquery：[http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min，lib / jquery]，
 angular：[https：// ajax .googleapis.com / ajax / libs / angularjs / 1.3.0-beta.14 / angular.min，lib / angular]，
 angularMocks：'app / vendors / bower_components / angular-mocks / angular- mocks'，
}，
 shim：{
'angleMocks'：{
 deps：['angular']，
 exports：'angular.mock'
} 
}，
 deps：tests，
 callback：window .__ karma __。start 
}）; 
  

还要确保在karma.config.js文件中提供了要测试的文件，更多详情请见： http://karma-runner.github.io/0.8/plus/ RequireJS.html 与上面的链接相同。

希望有所帮助

I am trying to set up unit testing for a SPA using karma/jasmine

First of all, the following test runs just fine in karma:

/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>

define(["app/domain/core/Collections"], (collections) => {

    describe('LinkedList', () => {

        it('should be able to store strings for lookup', () => {
            var list = new collections.Collections.LinkedList<string>();

            list.add("item1");
            expect(list.first()).toBe("item1");
        });
    });
}); 

However, collections is of type anyso that I can not use it for type declarations, thus I'm missing intellisense and whatnot when I am writing my tests. No good!

The problem arises when I try to re-write the test to a more TypeScript friendly format:

/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
import c = require("./../../src/app/domain/core/Collections");

describe('LinkedList', () => {

    it('should be able to store strings for lookup', () => {
        var list: c.Collections.LinkedList<string> = new c.Collections.LinkedList<string>();

        list.add("item1");
        expect(list.first()).toBe("item1");
    });
});

This compiles just fine, I get my type information for handy intellisense etc, but now karma throws an error.

It turns out it is trying to load the module without the .js postfix, indicated by the following error messages:

There is no timestamp for /base/src/app/domain/core/Collections! 
Failed to load resource: the server responded with a status of 404 (Not Found)
 (http://localhost:9876/base/src/app/domain/core/Collections)
Uncaught Error: Script error for: /base/src/app/domain/core/Collections

I'm gonna stop here for now, but if it will help I am glad to supply my karma config file, test-main and so on. But my hope is that someone has encountered this exact problem before and might be able to point me in the right direction.

My typescript is compiled with the AMD flag.

解决方案

It is not a TypeScript problem. We encountered the same problem. Turns out that karma "window.__karma__.files" array includes all files included in the test, including the .js extenstion.

Now requireJS does not work when supplying the .js extension. To fix it, in our main-test.js file, we created a variable "tests" by filtering all the *Spec.js files and then we removed the .js from the file name as requireJS needs it to be. More information here: http://karma-runner.github.io/0.8/plus/RequireJS.html

Below is how we did it (based on the info supplied in the link above):

main-test.js

console.log('===========================================')
console.log('=================TEST FILES================')


var tests = Object.keys(window.__karma__.files).filter(function (file) {
    return /\Spec\.js$/.test(file);
}).map(function (file) {
    console.log(file);
    return file.replace(/^\/base\/|\.js$/g, '');
});

console.log('===========================================')
console.log('===========================================')


require.config({
    baseUrl:'/base',
    paths: {
        jquery      :["http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min", "lib/jquery"],
        angular     : ["https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min", "lib/angular"],
        angularMocks: 'app/vendors/bower_components/angular-mocks/angular-mocks',
    },
    shim: {
        'angularMocks': {
            deps: ['angular'],
            exports: 'angular.mock'
        }
    },
    deps: tests,
    callback: window.__karma__.start
});

Also make sure you have supplied the files to be tested in your karma.config.js file, more details here: http://karma-runner.github.io/0.8/plus/RequireJS.html same as the link above.

Hope it helps

这篇关于RequireJS没有使用karma和typescript正确加载模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！