JSDOMでフロントエンドユニットテスト用の既存のHTMLファイルをロードする

Question

私は単体テストの初心者です。私のテストは価値がないかもしれないし、具体的なベストプラクティスに従っているかもしれませんが、 JSDOMを使用してフロントエンドコードをテストすることができます。

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'); 
    }); 
    }); 
}); 

「AssertionError：期待された未定義が配列になる」というエラーが表示されます。私はJSDOMを正しく機能させるために配列テストをテストとして使用しています。その他のエラーは発生していません。どんな助けでも大歓迎です！

Answer 1

fromFileは非同期関数です。つまり、beforeEach()が終了してテストが実行されるまでに、（おそらく）まだファイルがロードされています。

Mocha handles async code 2つの方法で：約束を返すか、コールバックで渡します。だから、どちらかfromFileから約束を返すか、行うこの：

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

約束バージョンは次のようになります。私は、問題を絞り込むまし

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