jestjs - 如何在 JEST 中测试 DOM 操作

Question

我正在尝试测试一个 ES6 函数，该函数在执行时更新 dom 元素。目前我得到空节点列表，因为没有加载 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
    });
});

Answer 1

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

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

Answer 2

提醒一下，如果测试中的 JS 正在使用 dataset 属性，那么由于 jsdom （尚）不支持 dataset 属性，因此有一个方便的 polyfill，它还将为您插入 DOM 内容 - https://www .npmjs.com/package/jsdom-mount