web-dev-qa-db-ja.com

JESTでDOM操作をテストする方法

DOM要素が実行されるたびに更新するES6関数をテストしようとしています。 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
    });
});
jestjsbabel-jest
8
loganathan

コードで必要なマークアップを挿入する必要があります

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

テスト中のJSがデータセットプロパティを使用している場合、jsdomが（まだ）データセット属性をサポートしていないため、便利なポリフィルがあり、DOMコンテンツも挿入されます- https ：//www.npmjs.com/package/jsdom-mount

1
stephenwil