如何用 Jest 测试节点列表

Question

我尝试用 Jest 测试一个 javascript 函数来检查变量是否是节点列表。这是一个浏览器功能，将在浏览器中使用。这是函数：

/**
 * @description Check if input is a nodelist and return true or false.
 * @export
 * @param {*} input
 * @returns {boolean}
 */
export function $isNodeList(input) {
    return NodeList.prototype.isPrototypeOf(input);
}

该函数在浏览器中运行良好，但如果我尝试开玩笑地测试它，我会收到以下错误：ReferenceError: NodeList is not defined

测试文件是：

const esmImport = require("esm")(module);
const mod = esmImport("../tools/is_nodelist.js");

const html = '<!DOCTYPE html>\
                <html>\
                    <body>\
                        <div>Hello world</div>\
                        <div>Hello</div>\
                        <div>...</div>\
                    </body>\
                </html>';

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { document } = (new JSDOM(html)).window;

global.document = document;

test("expect nodeList to be nodelist", () => {
    let nodeList = global.document.querySelectorAll("div");
    expect(mod.$isNodeList(nodeList)).toBe(true);
});

test("expect htmlCollection not to be nodelist", () => {
    let htmlCollection = global.document.getElementsByTagName("div");
    expect(mod.$isNodeList(htmlCollection)).toBe(false);
});

我的测试有什么问题，如何正确测试该功能？

Answer 1

您可以设置 jest.config.js 文件的 testenvironment 配置。这样您就不需要在测试文件中明确使用 jsdom 。

例如

index.js:

export function $isNodeList(input) {
  return NodeList.prototype.isPrototypeOf(input);
}

index.test.js:

import * as mod from '.';

describe('59947808', () => {
  test('expect nodeList to be nodelist', () => {
    let nodeList = document.querySelectorAll('div');
    console.log('nodeList: ', nodeList);
    expect(mod.$isNodeList(nodeList)).toBe(true);
  });

  test('expect htmlCollection not to be nodelist', () => {
    let htmlCollection = document.getElementsByTagName('div');
    console.log('htmlCollection: ', htmlCollection);
    expect(mod.$isNodeList(htmlCollection)).toBe(false);
  });
});

单元测试结果：

 PASS  src/Whosebug/59947808/index.test.js (8.528s)
  59947808
    ✓ expect nodeList to be nodelist (11ms)
    ✓ expect htmlCollection not to be nodelist (1ms)

  console.log src/Whosebug/59947808/index.test.js:6
    nodeList:  NodeList {}

  console.log src/Whosebug/59947808/index.test.js:12
    htmlCollection:  HTMLCollection {}

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        9.773s

jest.config.js:

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'jsdom',
};

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/Whosebug/59947808

如何用 Jest 测试节点列表

How to test nodelist with Jest

javascript

unit-testing

jestjs

jsdom