How to test DOM manipulation in JEST

jestjs babel-jest
loganathan picture loganathan · May 19, 2017 · Viewed 14.3k times · Source

I'm trying to test a ES6 function which updates the dom element whenever it is being executed. Currently I'm getting empty nodelist since the HTML page is not loaded. What is approach to test this purely with 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

gunnx picture gunnx · Jun 26, 2017

You should inject the markup needed by your code 

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

Related questions

Mocking globals in Jest

Is there any way in Jest to mock global objects, such as navigator, or Image*? I've pretty much given up on this, and left it up to a series of mockable utility methods. For example: // Utils.js export isOnline() { return …

Read More
Mocking `document` in jest

I'm trying to write tests for my web components projects in jest. I already use babel with es2015 preset. I'm facing an issue while loading the js file. I have followed a piece of code where document object has a …

Read More
How to resolve "Cannot use import statement outside a module" in jest

I have a React application (not using Create React App) built using TypeScript, Jest, Webpack, and Babel. When trying to run "yarn jest", I get the following error: I have tried removing all packages and re-adding them. It does not …

Read More