如何使用 jsdom 来测试函数 'document'

Question

我有一个小问题.. 我正在尝试测试我创建的一些函数（用 Typescript 编写），我正在使用 mocha/chai/jsdom。现在，在文档中使用 'document' 测试函数时出现错误。我收到消息 'ReferenceError: document is not defined'。我怎样才能用 'document' 测试这些功能？

例如：

[prompt.spec.ts]

import { expect } from 'chai'
import { JSDOM } from 'jsdom'
import { functionX } from './functions'

describe('Functions', () => {
  it('is possible to execute functionX with simple parameters', () => {
    const jsdom = new JSDOM()
    const htmlElement = jsdom.window.document.createElement('div')
    expect(functionX(htmlElement, function() { return true; } )).to.equal(true)
  })
})

[functions.ts]

export const functionX = (
    body:HTMLElement, callback: (ok: boolean) => void
) => {
    const doc = body.ownerDocument
    const parent = doc.body

    // ...

    let container = document.querySelector('.container') as HTMLDivElement  //  ReferenceError: document is not defined

}

Answer 1

如果您提前准备好 JSDOM 的文档，您可以在全球范围内将其用于您的测试。

import { JSDOM } from 'jsdom';
const { window } = new JSDOM('<!doctype html><html><body></body></html>');

// Save these two objects in the global space so that libraries/tests
// can hook into them, using the above doc definition.
global.document = window.document;
global.window = window;

将其写入一个单独的文件，并将该文件作为参数添加到 mocha 中，就在您的规范文件之前。类似于：

_mocha Specs/_setup.js Specs/*.js

如何使用 jsdom 来测试函数 'document'

how to use jsdom to test functions with 'document'

javascript

mocha.js

jsdom

chai

typescript