使用jsdom和Jest

时间:2015-03-02 14:32:40

标签: javascript angularjs jsdom jestjs

我正在尝试使用Jest来对角度应用进行单元测试。为了测试角度绑定,我尝试使用jsdom(N.B.我使用v3.1.2作为我使用节点而不是IO)。当我需要使用html加载脚本时,测试似乎在加载脚本之前完成。

我已经简化了我的测试用例以使用来自jsdom的示例:

it('updates the view without error', function(){
    var jsdom = require('../../../../node_modules/jsdom/lib/jsdom');

    jsdom.env(
      '<p><a class="the-link" href="https://github.com/tmpvar/jsdom">jsdom!</a></p>',
      ["http://code.jquery.com/jquery.js"],
      function (errors, window) {
        //console.log("contents of a.the-link:", window.$("a.the-link").text());
        console.log("Completed");
        expect(errors).toBeNull();
      }
    );

    console.log('exiting...');
});

如果我运行此测试,测试将通过但是&#34;已完成&#34;日志消息不会被打印,我也可以用明显失败的东西来取代期望,比如期望(假).toBeTruthy(),测试仍然会通过&#34;。如果我删除了jquery的注入,那么一切都按预期工作。

在退出测试之前,我应该如何确保加载脚本? 更一般地说,使用Jest明确地使用Jest感觉有点不对劲。还有更好的方法吗?

2 个答案:

答案 0 :(得分:4)

因为.env可能是异步的,所以在调用回调之前测试将始终存在。

根据jest tutorial,您只需将HTML分配给document.body.innerHTML

即可
// Set up our document body
document.body.innerHTML =
    '<div>' +
    ' <span id="username" />' +
    ' <button id="button" />' +
    '</div>';
var $ = require('jquery');

或者,您可以使用pit代替it并从函数返回承诺。

答案 1 :(得分:0)

我认为测试异步代码的最佳方法是传递docs中所述的“完成”回调。 您的代码将变为:

it('updates the view without error', function(done){
    var jsdom = require('../../../../node_modules/jsdom/lib/jsdom');

    jsdom.env(
      '<p><a class="the-link" href="https://github.com/tmpvar/jsdom">jsdom!</a></p>',
      ["http://code.jquery.com/jquery.js"],
      function (errors, window) {
        //console.log("contents of a.the-link:", window.$("a.the-link").text());
        console.log("Completed");
        expect(errors).toBeNull();
        done();
      }
    );

    console.log('exiting...');
});