jav*_*016 5 javascript testing unit-testing jasmine jsdom
我正在尝试在 jasmine 中为包含 DOM 元素的 JavaScript 代码编写一个测试，但该测试不起作用。当我仅测试 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;
在这个例子中看起来很奇怪，但我的实际代码要大得多（我不想发布整个代码，因为它对于我的问题来说不是必需的）并且这是必要的，所以我必须将它包含在这里（也许它会影响测试） 。
我遇到了与文档“未定义”相同的问题以及使用 ES6 的问题（语法错误：意外的令牌导入）。
我将 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
}
测试助手.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文档或其他帖子。
必须有一个 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 进入图片。
| 归档时间： |
|
| 查看次数： |
9644 次 |
| 最近记录： |