Laden vorhandener HTML-Dateien mit JSDOM für Frontend-Unit-Test

Question

Ich bin neu im Komponententest, und mir ist bewusst, dass meine Tests möglicherweise nicht wertvoll sind oder einer bestimmten Best Practice folgen, aber ich konzentriere mich darauf, dass das funktioniert erlaubt mir, meinen Frontend-Code mit JSDOM zu testen.

const { JSDOM } = require('jsdom'); 
const { describe, it, beforeEach } = require('mocha'); 
const { expect } = require('chai'); 

let checkboxes; 
const options = { 
    contentType: 'text/html', 
}; 

describe('component.js',() => { 
    beforeEach(() => { 
    JSDOM.fromFile('/Users/johnsoct/Dropbox/Development/andybeverlyschool/dist/individual.html', options).then((dom) => { 
     checkboxes = dom.window.document.querySelectorAll('.checkbox'); 
    }); 
    }); 
    describe('checkboxes',() => { 
    it('Checkboxes should be an array',() => { 
     expect(checkboxes).to.be.a('array'); 
    }); 
    }); 
}); 

Ich bekomme den Fehler "AssertionError: erwartet undefined, ein Array zu sein". Ich verwende den Array-Test einfach als Test, um sicherzustellen, dass JSDOM korrekt funktioniert. Es treten keine weiteren Fehler auf. Jede Hilfe würde sehr geschätzt werden!

Answer 1

fromFile ist eine asynchrone Funktion, was bedeutet, dass zu dem Zeitpunkt, wenn Ihr beforeEach() beendet ist und die Tests zu laufen beginnen, es (wahrscheinlich) immer noch die Datei lädt.

Mocha handles async code auf zwei Arten: Entweder eine Versprechen zurückgeben oder einen Rückruf übergeben. So Rückkehr entweder das Versprechen von fromFile oder dies tun:

beforeEach(function(done) { 
    JSDOM.fromFile(myFile) 
    .then((dom) => { 
     checkboxes = dom.window.document.querySelectorAll('.checkbox'); 
    }) 
    .then(done, done); 
}); 

Das Versprechen Version sieht wie folgt aus:

beforeEach(function() { 
    return JSDOM.fromFile(myFile) 
    .then((dom) => { 
     checkboxes = dom.window.document.querySelectorAll('.checkbox'); 
    }); 
});