4

假设我有一个使用 bower、grunt、bowerify（使用 shim）的项目，因为我非常喜欢 Jest，所以我想用它来测试。当我运行测试时，我怎么会开玩笑地看到我的 browserify shim 模块。我使用 grunt 来启动 npm test 命令。这是我的 package.json 文件。

"browser": {
    "jquery": "./bower_components/jquery/dist/jquery.js",
    "foundation": "./bower_components/foundation/js/foundation/foundation.js",
    "fastclick": "./bower_components/fastclick/lib/fastclick.js",
    "greensock-tm": "./bower_components/gsap/src/uncompressed/TweenMax.js",
    "greensock-css": "./bower_components/gsap/src/uncompressed/plugins/CSSPlugin.js",
    "greensock-time": "./bower_components/gsap/src/uncompressed/TimelineMax.js",
    "scrollmagic": "./bower_components/ScrollMagic/js/jquery.scrollmagic.js",
    "handlebars": "./bower_components/handlebars/handlebars.runtime.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "greensock-css": "CSSPlugin",
    "fastclick": "FastClick",
    "greensock-tm": "TweenMax",
    "greensock-time": "TimelineMax",
    "scrollmagic": "ScrollMagic",
    "foundation": "foundation",
    "handlebars": "Handlebars"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },

现在，在运行测试之前，我几乎可以通过在我的 grunt 文件中执行此操作来解决此问题。

grunt.registerTask("shimBowerForTests",function(){
    var readJson = require('read-package-json');
    var fs = require('fs');
    var remapify = require('remapify');
    readJson('./package.json', console.error, false, function (er, data) {
      if (er) {
        throw "There was an error reading the file";
      }
      var packages = data.browser;
      var browserify = require('browserify');
      for (var key in packages){
        var b = browserify();
        var wstream = fs.createWriteStream("devjs/test/modules/"+key+'.js');
        b.add(packages[key]);
        b.bundle().pipe(wstream);
      }
    });
  });

和。

exec: {
      jestTest: {
        command: 'cp -r devjs/modules devjs/test/modules && npm test'
      }
    }

问题是使用browserify，所以将浏览器的所有内容与我的设置结合起来效果很好，我可以像这样要求我的垫片模块。 require('jquery') //example但是在开玩笑的cli中，测试失败了，因为他们可以找到模块，除非我以某种方式在它前面加上./，就像这样require('./jquery')

4

2 回答 2

2

我猜问题是你只安装了带有 bower 的垫片模块。如果您希望它们在 node/jest 中工作，您还必须使用 npm 安装它们。然后确保 Jest 没有模拟 node_modules 目录中的任何内容，只要名称匹配，它就应该在那里找到所有必需的模块。

您的 Jest 配置package.json应如下所示：

"jest": {
  "unmockedModulePathPatterns": [
    "./node_modules"
  ]
}

然后只需下载所有依赖项。

npm install jquery --save-dev
于 2015-01-31T22:04:51.513 回答
0

更新

而不是使用我下面的解决方案，你应该选择使用 Karma,karma browserify。我已将以下解决方案转换为使用业力，并且效果要好得多。

----------------------旧答案我实际上解决这个问题的方法是，使用 Jest 源预处理器重写 require 语句以在我使用 grunt 创建的 /tests/ 文件夹中的某个目录。该文件夹包含我的 browserify-shim，package.json 文件的浏览器部分中列出的文件。

编辑：这是我填充凉亭的方法，我在 Gruntfile.js 中制作了这个脚本，它将所有凉亭模块和我需要的任何 commonjs 模块放入可访问的目录中。

grunt.registerTask("shimBowerForTests", function() {
    var readJson = require('read-package-json');
    var fs = require('fs');
    readJson('./package.json', console.error, false, function(er, data) {
      if (er) {
        throw "There was an error reading the file";
      }
      var packages = data.browser;
      var shim = data['browserify-shim'];
      var browserify = require('browserify');
      var exclude = ["jquery.maskedinput", "jquery"];
      for (var key in packages) {
        var b = browserify();
        var wstream = fs.createWriteStream("devjs/test/modules/" + key + '.js');
        if (shim[key] !== undefined && exclude.indexOf(key) === -1) {
          b.add(packages[key]);
          b.bundle().pipe(wstream);
        } else {
          var rstream = fs.createReadStream(packages[key]);
          rstream.pipe(wstream);
        }
      }
    });
  });

然后在 Jest 预处理器文件中执行此操作。

module.exports = {
  process: function(src, path) {
    var src2= src.replace(/require\([\"\']([^\.\'\"]+)[\"\']\)/g, "require(\'../modules/$1\')");
    src2= src2.replace(/jest\.dontMock\([\"\']([^\.\'\"]+)[\"\']\)/g, "jest.dontMock(\'../modules/$1\')");
    return src2;
  }
};
于 2015-02-10T04:41:21.860 回答