PhantomJS与RequireJS + Jasmine玩得不好

时间:2016-01-19 19:28:56

标签: javascript requirejs jasmine phantomjs

我有一些使用RequireJS和Jasmine运行的测试。我有一个Jasmine测试工具文件,如下所示:

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
    <script type="text/javascript" src="./Scripts/jasmine/jasmine.js"></script>
    <script type="text/javascript" src="./Scripts/jasmine/jasmine-html.js"></script>
    <script type="text/javascript" src="./Scripts/jasmine/boot.js"></script>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>

    <script type="text/javascript">

        require(["fakeTest"], function () {
                window.onload();
        });

    </script>
</head>
<body>
</body>
</html>

我的fakeTest文件非常简单:

define(["require", "exports"], function (require, exports) {
    describe("fake test", function () {
        it("test nothing", function () {
            expect(1).toEqual(1);
        });
    });
});

如果我在FireFox / Chrome中运行它,那么一切正常;我看到一个测试,它通过了。如果我用PhantomJS运行它,我开始遇到问题。使用远程调试器标志运行它我收到错误:

  

错误:找不到模块'fakeTest'

     

phantomjs://bootstrap.js:299 in require
  phantomjs://bootstrap.js:263 in require

如果我尝试更改我的线束文件,使其显示requirejs [(“fakeTest”......而不是仅仅需要,我会收到此错误:

  

错误:“fakeTest”的脚本错误   http://requirejs.org/docs/errors.html#scripterror

     

https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:140   在defaultOnError中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:544   in onError
  https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1732   in onScriptError:appendChild中的0   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1952   在负载中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1679   在负载中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:829   在负载中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:819   在获取中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:851   在检查中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1177   在启用中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1550   在启用中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1162   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:131   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:56   在每个中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1114   在启用中   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:783   在初始   https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1453

如果我输入一个完全无效的模块名称,我在两种情况下都会遇到相同的错误。

我完全不知道为什么会这样。我已经玩过了在线束文件中更改fakeTest的路径,但没有任何变化。我已经尽可能地简化了线束文件,但是因为我仍然看到这个我不知道还有什么可以尝试。有人有什么想法吗?

修改

我删除了与Jasmine有关的一切,只是让fakeTest做了警报。现在我收到错误说

<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
    <script type="text/javascript">
        require(["fakeTest"], function () {});
    </script>
</head>
<body>
</body>
</html>

define(["require", "exports"], function (require, exports) {
    alert('foo');
});
  

“ReferenceError:找不到变量:requirejs”

2 个答案:

答案 0 :(得分:0)

而不是写html使用karma with requirejs plugin

<强> karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine', 'requirejs'],

    files: [
      {pattern: 'Scripts/**/*.js', included: false},
      {pattern: 'test/*.js', included: false},

      'test/test-main.js'
    ],

    // list of files to exclude
    exclude: [],

    browsers: ['PhantomJS']
  });
};

<强>测试/测试main.js

var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];

// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    // If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
    // then do not normalize the paths
    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
    allTestFiles.push(normalizedTestModule);
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',

  // example of using a couple path translations (paths), to allow us to refer to different library dependencies, without using relative paths
  paths: {
    // Put Your requirejs config here
  },

  // example of using a shim, to load non AMD libraries (such as underscore)
  shim: {
  },

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

这是示例文件。修复它并运行

karma run

答案 1 :(得分:0)

而不是

<script type="text/javascript" 
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>

使用

<script type="text/javascript" 
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js" 
        data-main="Tests/main"></script>

将测试文件移至测试目录。

Tests / main.js 中使用您的requirejs配置并运行主测试文件。

var deps = ['Tests/fakeTest'];

require.config({
  baseUrl: '..',

  paths: {
      'jasmine': ['Scripts/jasmine//jasmine'],
      'jasmine-html': ['Scripts/jasmine/jasmine-html'],
      'jasmine-boot': ['Scripts/jasmine/boot']
  },
  // shim: makes external libraries compatible with requirejs (AMD)
  shim: {
    'jasmine-html': {
      deps : ['jasmine']
    },
    'jasmine-boot': {
      deps : ['jasmine', 'jasmine-html']
    }
  }
});

require(['jasmine-boot'], function () {
  require(deps, function(){
    //trigger Jasmine
    window.onload();
  })
});

index.html 中仅运行测试/ main.js 文件:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js" data-main="Tests/main"></script>
</head>
<body>
</body>
</html>