如何使用 jsdom 测试导入 jquery 的 es6 模块

Question

我正在努力让 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 模块而不会出现错误：

错误：jQuery 需要 window 和文档

这是完整的来源https://github.com/markbrown4/test-simple

Answer 1

知道了，test/_setup.js 需要以下内容：

global.document = require('jsdom').jsdom('<html></html>');
global.window = document.defaultView;
global.$ = require('jquery')(window);

document.parentWindow 已从 jsdom 弃用。

Answer 2

我认为这将是一个更合适的示例，因为在这种情况下我使用的是 es6 import:

    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(); // ?

如何使用 jsdom 测试导入 jquery 的 es6 模块

How to test es6 module that imports jquery with jsdom

jquery

mocha.js

babeljs

jsdom