web-dev-qa-db-fra.com

Comment tester la manipulation du DOM dans JEST

J'essaie de tester une fonction ES6 qui met à jour l'élément dom chaque fois qu'il est exécuté. Actuellement, je reçois une liste de noeuds vide, car la page HTML n'est pas chargée. Quelle est l'approche pour tester cela uniquement avec 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
6
loganathan

Vous devez injecter le balisage requis par votre code 

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

Rappelez-vous que si la propriété dataset est utilisée par le JS testé, alors que jsdom ne prend pas (encore) en charge l'attribut dataset, il existe un polyfill bien pratique qui insérera également un contenu DOM - https://www.npmjs.com/package/jsdom-mount

1
stephenwil