如何使用 jasmine 测试带有 DOM 元素的 JavaScript？答案

【问题标题】：How to test JavaScript with DOM elements using jasmine?如何使用 jasmine 测试带有 DOM 元素的 JavaScript？
【发布时间】：2018-06-21 20:59:48
【问题描述】：

我正在尝试用 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);
    });
})

对于我总是得到的测试：

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

我知道

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

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

【问题讨论】：

在你的测试中模拟表单； document.forms.myForm = { one: { value: 5 }, two: { value: 1 } };
我不明白如何在我的测试中使用 /where 。你能具体说明一下吗？谢谢。

标签： javascript unit-testing testing jasmine jsdom

【解决方案1】：

我遇到了文档“未定义”的问题以及使用 ES6 的问题（SyntaxError: Unexpected token import）。

我将 jasmine 与 babel 和 jsdom 一起使用。

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

我的解决方案：

茉莉花.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;

通过上述设置，您可以在测试中使用“文档”。

PS：以上不是完整的 babel 设置。请参阅babel 文档或其他帖子。

【讨论】：

浏览器版本会是什么样子或者我会在哪里读到我？

【解决方案2】：

必须有一个你的 js 将执行的环境。

浏览器
节点

您可以使用 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。参考示例，了解window 对象如何通过 jsdom 进入图片。

【讨论】：