KarmaJS、Jasmine、RequireJS 等:如何使用 Require 测试模块

2024-04-10

使用 RequireJS 运行 Karma + Jasmine 测试——起步

帮助! 。 。 。 _ _ _ 。 。 。求救!

目前,我有一个练习项目,旨在熟悉 KarmaJS 以及整个单元测试。广泛的问题是,我对 Karma 在幕后所做的事情确实没有透明的了解,而且我似乎无法在相关领域找到足够的文档。事不宜迟……

这是我的文件夹结构:

root
    |-/lib
        |-/[dependencies] (/angular, /angular-mocks, /bootstrap, /etc)  # from bower
    |-/src                                                              
        |-/[unreferenced directories] (/js, /css, /views)               # not referenced anywhere
        |-app.js                                                        # sets up angular.module('app', ...)
        |-globals.js                                                    # may be referenced in RequireJS main file; not used.
        |-index.html                                                    # loads bootstrap.css and RequireJS main file
        |-main.js                                                       # .config + require(['app', 'etc'])
        |-routeMap.js                                                   # sets up a single route
        |-test-file.js                                                  # *** simple define(function(){ return {...}; })
    |-/test
        |-/spec
            |-test-test-file.js                                         # *** require || define(['test-file'])
    |-.bowerrc                                                          # { "directory": "lib" }
    |-bower.json                                                        # standard format
    |-karma.conf.js                                                     # *** HELP!
    |-test-main.js                                                      # *** Save Our Souls!!!

karma.conf.js

// Karma configuration
// Generated on Wed Nov 19 2014 15:16:56 GMT-0700 (Mountain Standard Time)

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
      //'test/spec/test-test-file.js',
      //'lib/**/*.js',
      //'src/**/*.js',
      //'test/spec/**/*.js',
      'test-main.js',
      {pattern: 'lib/**/*.js', included: false},
      {pattern: 'src/**/*.js', included: false},
      {pattern: 'test/spec/*.js', included: true}
    ],


    // list of files to exclude
    exclude: [
        'lib/**/!(angular|angular-mocks|angular-resource|angular-route|require|text).js',
        'lib/**/**/!(jquery|bootstrap).js',
        'src/app.js'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

测试-main.js

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

var pathToModule = function(path) {
    return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(pathToModule(file));
    }
});

require.config({
    // Karma serves files under /base, which is the basePath from your config file
    baseUrl: '/base/src',
    
    paths: {
        
        angular: '../lib/angular/angular',
        ngRoute: '../lib/angular-route/angular-route',
        jquery: '../lib/jQuery/dist/jquery',
        bootstrap: '../lib/bootstrap/dist/js/bootstrap',
        models: 'models',
        controllers: 'controllers',
        globals: 'globals',
        routeMap: 'routeMap'
    },
    shim: {
        angular: {
            exports: 'angular'
        },
        ngRoute: {
            deps: ['angular']
        },
        jquery: {
            exports: '$'
        },
        bootstrap: {
            deps: ['jquery']
        }
    },

    // dynamically load all test files
    deps: allTestFiles,

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

测试测试文件.js

console.log('....................');

define(function(){
    //console.log('testing test-file', testFile);
    
    describe('Testing testing', function(){
        it('should work', function(){
            expect(true).toEqual(true);
        });
    });

});

测试文件.js

define('testFile', [], function(){
    
    return function init(sandbox){
        var app, application = app = sandbox.app
          , globals = sandbox.globals;
        
        return {
            some: 'module'
        };
    };
    
});

问题与描述

我希望听到答案的要点是

  • {pattern: '...', 是什么意思包括:真|假 } do?
  • 排除凉亭目录中所有额外内容的最佳方法。
  • 我需要在 test-main.js 文件中包含哪些文件?
  • 我需要在 karma.conf.js 文件中包含哪些文件?
  • test-main.js 实际上做了什么;这是为了什么?

当我将规范包装在一个文件中时,我就会收到错误和问题define(...)call -- 当我给模块一个 ID 时发生的事件 --define('someId', function(){ ... }) -- 我需要从这个模块返回一些东西吗,因为它是一个define call?

其他时候,我收到“ol”错误:“/base/src/app.js 没有时间戳!”。 “当然是时间戳!我真傻……”——这到底是什么意思?!有时我会得到臭名昭著的“已执行 0 个,共 0 个错误“——我也可以在这里澄清一下。真的,我得到了很多错误:“...没有时间戳...”错误——甚至404当它seems我应该将该库与 karma.conf.js 一起引入files配置...???

甚至似乎通常当我明确告诉业力排除src/app.js我仍然得到404和错误。

tl;dr

显然,我对 Karma 和 *DD 有点困惑……

我可以跑test-test-file.js当我的 karma.conf.js 很好files数组看起来像[ 'test-main.js', 'test/spec/test-test-file.js' ]-- 但是,如果我将测试包装在 RequireJS 定义调用中,我会得到“不匹配的匿名定义()” 上面提到的错误。

看来当我添加{ 模式:'...',包括:false }那么 karma 就不会为给定的模式添加任何我的文件(???)。

如果有人甚至可以简单地指导我如何将 RequireJS 与 Karma 一起使用——也就是说,我可以将我的测试包装在定义/要求调用并拉入我想要测试的模块...那将不胜感激。

由于要保持这类问题简短并仍然提供足够的信息有点困难,我希望我没有说得太长。


EDIT

在阅读了 glepretre 的答案并自己进行了一些摆弄之后,我重新配置了我的项目,如下所示:

  • Moved test-main.js to test/test-main.js,
  • renamed 测试测试文件.js to testFileSpec.js-- 将其移自test/spec to test/,

karma.conf.js:

...
// list of files / patterns to load in the browser
files: [
    {pattern: 'lib/**/*.js', included: false},
    {pattern: 'src/**/*.js', included: false},
    {pattern: 'test/**/*Spec.js', included: false},
    
    'test/test-main.js'
  
],
....

测试/测试-main.js:

/* **************** HOW COME THE DEFAULT (Karma-generated) CONFIGURATION DOES ***NOT WORK???
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
    return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(pathToModule(file));
    }
});
*/

var tests = [];
for (var file in window.__karma__.files) {
    if (/Spec\.js$/.test(file)) {
        tests.push(file);
    }
}

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

    // dynamically load all test files
    //deps: allTestFiles,
    //
    deps: tests,

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

我现在正在成功运行单元测试!特别感谢 glepretre 和所有其他贡献者.


感谢您的任何见解:)


好的,我会尝试一次解决每个问题:

问题1

  • {pattern: '...', 是什么意思包括:真|假 } do?

Karma 的默认行为是:

  • 查找所有匹配的文件pattern(强制属性)
  • 观察他们的变化(watched选项)以便在编辑代码时重新启动单元测试以提供实时结果(只要保留默认值即可autoWatch默认值为true).
  • 使用自己的网络服务器为他们提供服务(served option)
  • 使用以下命令将它们包含在浏览器中<script> (included option)

所以,在fileskarma 配置数组,您可以通过仅添加字符串模式来使用默认行为:

files: [
  // this will match all your JS files 
  // in the src/ directory and subdirectories
  'src/**/*.js'
]

或者使用完整的对象语法来自定义每个选项:

files: [
  {pattern: 'src/**/*.js', watched: true, served: true, included: false}
]

使用 requireJS,您不希望包含它们,因为这会与 requireJS 行为发生冲突!

包括。描述:是否应该使用以下方式将文件包含在浏览器中<script>标签?如果您想手动加载它们,请使用 false,例如。使用需要.js.

from 业力/配置/文件文档 http://karma-runner.github.io/0.12/config/files.html

注意:请注意在数组中添加文件/模式的顺序。这很重要!为了更好的理解,设置logLevel: config.LOG_DEBUG在你的业力配置中。

问题2

  • 我需要在 karma.conf.js 文件中包含哪些文件?

至少是单元测试组件正常运行所需的所有文件。

基本上,您的文件中列出的所有文件define([]) and require() blocks.

问题3

  • 排除凉亭目录中所有额外内容的最佳方法。

你到底想做什么?

根据我之前写的内容,您可以看到您可以有选择地添加测试中需要的文件。

我用来添加图案'/bower_components/**/*.js'乃至'/bower_components/**/*.html'当我的凉亭包使用模板时。我从来没有注意到任何重大的性能问题,如果这就是您所担心的......由您来定义您需要的文件模式。

问题 4 和 5

  • test-main.js 实际上做了什么;这是为了什么?

  • 我需要在 test-main.js 文件中包含哪些文件?

目的test-main.jsfile 的作用是在启动 Karma 之前查找并加载您的测试文件。它连接了 Karma 和 requireJS 之间的点

您必须选择一个约定来命名您的测试文件,然后定义TEST_REGEXP匹配所有这些。

官方”应用程序结构的角度风格指南和最佳实践 https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub建议使用后缀*_test.js.

EDIT:您的正则表达式不起作用,因为它被定义为捕获"spec.js" || "test.js"或您的规范文件名以以下结尾"file.js";) 请参见http://regex101.com/r/bE9tV9/1 http://regex101.com/r/bE9tV9/1

还有一件事

我希望我说得足够清楚。您可以使用 Angular + Require 查看我们项目的入门应用程序结构:角度 requirejs 就绪 https://github.com/glepretre/angular-requirejs-ready。它已经通过 Karma 和 Protractor 进行了设置和测试。

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

KarmaJS、Jasmine、RequireJS 等:如何使用 Require 测试模块 的相关文章

  • 如何对 Slim 框架应用程序进行单元测试

    我一直在尝试对修改其他人代码的示例进行单元测试 每次我到达测试运行时都没有错误的程度 当我期望它们通过时 我只是遇到相同的失败 网上没有大量文档 我真的不知道还能去哪里 任何人都可以看到我的代码哪里出错了 bootstrap php php
  • Jasmine.js 测试 - 监视 window.navigator.userAgent

    我需要找到改变的方法userAgent价值 我尝试过了spyOn the window navigator userAgent 但这没有帮助 JS Injectable export class DetectBrowserService b
  • Angular 2 中的 ag-grid 单元测试

    有人在 Angular 2 中对 ag grid 组件进行过单元测试吗 对我来说 测试用例运行时 this gridOptions api 仍然未定义 很抱歉参加聚会有点晚了 但几天前我一直在寻找这个问题的答案 所以想为最终来到这里的其他人
  • 如何使用 Jasmine 监视 AngularJS 的 $timeout?

    我试图监视 timeout 以便我可以验证它是否未被调用 具体来说 我的生产代码 见下文 将 timeout 作为函数调用 而不是对象 timeout function and not timeout cancel for instance
  • createSpy 在 Angular + Jasmine 中如何工作?

    我做了一个简单的工厂演示 我正在尝试使用jasmine 我能够运行测试 但我正在使用spyOn方法 我宁愿使用茉莉花 createSpy or 茉莉花 createSpyObj做同样的测试 有人可以帮助我重构我的代码 以便在我的示例中使用这
  • 在二进制 R 包中包含测试

    我在用testthat为我的 R 包编写单元测试 我见过一些软件包作者 比如来自Rcpp and ggplot2 使用二进制文件分发单元测试 但是 当我使用 RStudio 0 98 1102 构建包时devtools 1 7 0 test
  • 带有 Spock Stub 的泛型

    我无法为泛型类编译 Spock 存根 构造函数的签名如下 SomeClass SerSup
  • 单元测试(有时)会因为浮点不精确而失败

    我有课Vector代表 3 维空间中的一个点 这个向量有一个方法normalize self length 1 将矢量缩小 放大为length vec normalize length length 该方法的单元测试有时由于浮点数的不精确性
  • 在什么情况下会在快速测试中使用expectationForNotification

    我有点困惑什么 什么时候做expectationForNotification as opposed to期望与描述 我无法在 swift 中找到任何明确的示例来说明您何时以及如何处理此调用 我假设它可能是为了测试通知 但看起来它可能只是整
  • 您会将什么放入存储库类(数据访问层)的单元测试中?

    我想为我的数据访问层编写一个单元测试 以确保其中的一切正常工作 问题是 我应该把什么样的东西放入测试中 DAL 是静态的Repository隐藏底层 Fluent NHibernate 并通过一个公开的东西向公众公开的类IQueryable
  • 单元测试 python 代码,其中 configparser 从配置文件中读取

    我是 python 单元测试的新手 我学习并进行了示例单元测试 其中方法接受输入并返回输出 但对于下面提到的代码 我有一些疑问 如何在unittest中模拟init方法的configparser 路径 config program cfg
  • 单元测试项目无法读取应用程序的App.config

    在运行 Visual Studio Pro 2013 12 0 21005 1 的构建计算机上 我有一个单元测试项目无法正确读取其 App config 文件 如果有的话 以下返回 null System Configuration Con
  • Xcode 不再识别测试

    我已经解决这个问题几天了 但我没有任何想法 我在 Xcode 中使用单元测试 效果很好 突然 Xcode 不再识别我的测试 如果我进入测试面板 它会显示我的测试为零 我其实有13个 运行单独测试或某些课程的能力现已消失 它不会在编辑器区域的
  • Google 测试中没有模拟的 EXPECT_CALL

    有没有办法通过 GoogleTest for c 测试函数调用而不创建模拟对象 例如我们有以下生产代码 if a method x 我想测试一下是否method在这种情况下将被调用a是真的并且a是假的 我想构建一个与 Google Test
  • 如何在 Python 中的每个单元测试之前和之后运行特定代码

    以下是我在文件中的测试的结构 Class setup 测试01测试02测试03拆除 我需要在每次测试之前和之后运行特定的代码 以前 我可以从设置中调用该代码 但在测试之后 我不知道该怎么做 显然 从拆卸中调用代码对于最后一个测试是有效的 但
  • 使用 RequireJS 的条件注释仅加载 IE7/8 jQuery

    我在我的项目中使用 Require JS 它加载 jQuery 和其他一些与整个网站和所有浏览器相关的 JavaScript 文件 但是 我需要在 Internet Explorer 7 和 8 上使用一些条件 jQuery 我尝试将其放在
  • OCMock - 尽管是预期的,但仍调用了意外的方法

    这是经过测试的代码 if MFMailComposeViewController canSendMail MFMailComposeViewController mailComposeController MFMailComposeView
  • Visual Studio 2013 未发现单元测试

    我在 Visual Studio 2013 中有一个简单的解决方案 它由一个 Web 项目 一个库项目和一个单元测试项目组成 当我打开解决方案并尝试运行单元测试时 Visual Studio 不会发现它们 要运行测试 我尝试转到菜单并选择
  • 当 TestCase 包含数组时,NUnit 无法识别该 TestCase

    这是我在 NUnit 中遇到的非常简单但烦人的行为 我有一些这样的测试 Test TestCase 1 2 hello TestCase 3 5 goodbye public void MyClass MyMethod int a int
  • 使用assertRaise测试异常消息

    我试图在函数内断言引发异常 其中条件引发自定义异常消息 功能 if not Cart objects filter member member count raise CartDoesNotExist Cart Does Not Exist

随机推荐