如何在 JEST 中测试 DOM 操作答案

【问题标题】：How to test DOM manipulation in JEST如何在 JEST 中测试 DOM 操作
【发布时间】：2017-10-19 03:44:02
【问题描述】：

我正在尝试测试一个 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
    });
});

【问题讨论】：

标签： jestjs babel-jest

【解决方案1】：

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

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

【讨论】：

此答案的更多上下文：jestjs.io/docs/en/tutorial-jquery

【解决方案2】：

提醒一下，如果测试中的 JS 正在使用 dataset 属性，那么由于 jsdom （还）不支持 dataset 属性，有一个方便的 polyfill，它也会为你插入 DOM 内容 - @987654321 @

【讨论】：