使用 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: expected undefined to be an array"。我只是将数组测试用作确保 JSDOM 正常运行的测试。没有其他错误发生。任何帮助将不胜感激！

Answer 1

fromFile 是一个异步函数，这意味着当您的 beforeEach() 完成并且测试开始运行时，它（可能）仍在加载文件。

Mocha handles async code 有两种方式：return 承诺或传递回调。所以要么 return 来自 fromFile 的承诺，要么这样做：

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

promise 版本如下所示：

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

使用 JSDOM 加载现有 HTML 文件以进行前端单元测试

Loading existing HTML file with JSDOM for frontend unit testing

javascript

unit-testing

mocha.js

chai

jsdom