如何使用Jasmine测试JavaScript中的DOM元素？

Question

如何使用Jasmine测试JavaScript中的DOM元素？

javascriptunit-testingtestingjasminejsdom

5

我正在尝试使用Jasmine编写测试JavaScript代码，其中包含DOM元素，但无法正常工作。当我仅针对JavaScript代码进行测试时（只是一些简单的函数，但不是针对DOM元素），它可以正常工作。我已经研究了很长时间，但仍然找不到答案。我还尝试使用jsdom，因为在测试DOM元素时应该使用它，但我始终收到一堆错误信息。是否有任何“简单”的方法仅使用Jasmine测试DOM元素？

JavaScript:

var result;
var adding = function(one, two) {
    var one1 = document.forms["myForm"]["one"].value;
    var two1 = document.forms["myForm"]["two"].value;
    result = parseInt(one1) + parseInt(two);
    var number = document.getElementById("number");
    number.innerHTML = result;
    return result;
}

HTML:

<html>

<head> </head>

<body>
    <form name="myForm">
        <h4>numner 1</h4> <input type="text" name="one" id="one"></input>
        <h4>number 2</h4> <input type="text" name="two" id="two"></input> <input type="submit" onclick="adding(one.value, two.value); return false;"> </form>
    <p id="number"> </p>
</body>

</html>

我的测试规范：

describe("additions", function() {
    it("result should add two numbers", function() {
        var final = adding(5, 1);
        expect(final).toEqual(6);
    });
})

在测试中，我总是遇到以下错误：

无法读取未定义的属性“one”。

我知道

var one1 = document.forms["myForm"]["one"].value;
var two1 = document.forms["myForm"]["two"].value;

在这个例子中看起来很奇怪，但我的实际代码要复杂得多（我不想发布整个代码，因为对于我的问题来说并不是必要的），而且它是必要的，所以我不得不在这里包含它（也许它会影响测试）。

- javascript2016

在你的测试中模拟该表单：document.forms.myForm = { one: { value: 5 }, two: { value: 1 } }; - Heretic Monkey

1

我不明白如何使用它/将其放在我的测试中哪里。能否请您具体说明一下？谢谢。 - javascript2016

2个回答

3

必须有一个环境来执行你的JS代码。

浏览器
Node

你可以使用Karma(或者类似的测试运行器)在浏览器中运行你的测试。Karma在真正的浏览器（如Chrome/IE/Firefox/Safari）或无头浏览器（如PhantomJS）中执行HTML/JS/Jasmine-Test-JS。你还可以利用jQuery选择器。

你可以使用JSDOM在Node中运行你的测试。这里会创建一个虚拟DOM在内存中。如果你想运行选择器，可以使用Cheerio获取类似于jQuery的行为。

import {expect} from 'chai';
import jsdom from 'jsdom';
import fs from 'fs';

describe('index.html', ()=>{
  it('should have h1 that says Users', (done)=>{
    const index = fs.readFileSync('./src/index.html', "utf-8");
    jsdom.env(index, function(err, window){
      if(err){
        console.log(err);
      }
      else{
        const h1 = window.document.getElementsByTagName('h1')[0];
        expect(h1.innerHTML).to.equal("Users");
        done();
        window.close();
      }
    })
  })
})

要在Node中运行测试，您需要将html内容存储在一个变量中并初始化jsdom。请参考以下示例，了解jsdom如何引入window对象。

- blogbydev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ChrisK · Accepted Answer

我遇到了相同的问题，文档未定义并使用了ES6（SyntaxError：Unexpected token import）。

我使用了带有Babel和jsdom的Jasmine。

Jasmine可以在Node或/和浏览器中运行测试。我猜在使用Node版本时更为通用。

我的解决方案：

jasmine.json

{
    "spec_dir": "spec",
    "spec_files": [
        "**/*[sS]pec.js"
    ],
    "helpers": [
        "../node_modules/babel-register/lib/node.js",   // load babel first to use ES6 'import' and other features
        "helpers/**/*.js"

    ],
    "stopSpecOnExpectationFailure": false,
    "random": true
}

testHelper.js

import jsdom from 'jsdom';
import fs from 'fs';

const index = fs.readFileSync('./static/index.html', 'utf-8');
const { JSDOM } = jsdom;

const { document } = (new JSDOM(index)).window;
global.document = document;

通过以上设置，您可以在测试中使用'document'。

附注：以上并非完整的Babel设置。请参阅Babel文档或其他文章获取详细信息。