如何在JEST中测试DOM操作

Question

我正在尝试测试一个ES6函数，每当执行时都会更新DOM元素。目前，由于HTML页面尚未加载，我得到了空的节点列表。在不依赖于HTML页面的情况下，如何使用JEST进行纯测试？

jest.dontMock('../scripts/taskModel');
import Request from '../__mocks__/request';
import Task from '../scripts/taskModel';

describe('taskModel', () => {
    it('Should initialize with no friends items', function() {
        expect(document.querySelectorAll('.panel-block').length).toBe(1); // THIS IS ALWAYS RETURNS EMPTY NODELIST
        var task = new Task();
        task.index();
        expect(document.querySelectorAll('.panel-block').length).toBeGreaterThanOrEqual(6); // THIS IS ALWAYS RETURNS EMPTY NODELIST
    });
});

- loganathan

Answer 1

你应该注入代码所需的标记

document.body.innerHTML = '<div id="test"><div class="panel-block"></div>....</div>'

- gunnx

---

此答案的更多上下文信息：https://jestjs.io/docs/en/tutorial-jquery - Eric Majerus

Answer 2

提醒一下，如果JS测试中使用了数据集属性，则由于jsdom尚不支持数据集属性，因此有一个方便的polyfill可用，该polyfill还将为您插入DOM内容 - https://www.npmjs.com/package/jsdom-mount

- stephenwil