我正在努力让Mocha, jsdom, es6模块与babel一起与jquery玩得很好。
下面是一个模块
// lib/dom.js
import $ from 'jquery';
const node = (tag)=> $(`<${tag} />`)
export {
node
}
这里有一个测试
// test/dom.js
import assert from 'assert';
import { node } from '../src/lib/dom';
describe('node(tag)', ()=> {
it('should return a Node', ()=> {
let img = node('img');
assert(img.nodeName === 'IMG');
});
});
以下是jsdom的设置
// test/_setup.js
var jsdom = require('jsdom');
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.parentWindow;
要运行的脚本
mocha --compilers js:babel-register --recursive
我需要改变什么才能让jsdom加载jquery，让dom.js可以加载jquery模块而不出现错误。
Error: jQuery requires a window with a document
明白了，test_setup.js需要以下内容。
global.document = require('jsdom').jsdom('<html></html>');
global.window = document.defaultView;
global.$ = require('jquery')(window);
document.parentWindow在jsdom中已经过时了。
我认为这将是一个更合适的例子，因为在这种情况下，我使用es6导入。
import {JSDOM} from 'jsdom';
import * as $ from 'jquery';
const dom = new JSDOM(`
<!DOCTYPE html>
<p>Hello world</p>
<table id="table">
<tr>
<td> student</td>
</tr>
</table>
`);
// if you are using TypeScript you will need to ignore next line
// @ts-ignore
global.window = dom.window;
// @ts-ignore
global.document = dom.window.document;
// And now you can access JSDOM document from Jquery
$('#table').html(); // ?