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

Question

我是单元测试的新手，我知道我的测试可能没有值(value)或没有遵循特定的最佳实践，但我专注于让它正常工作，这将允许我使用 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有两种方式:返回 promise 或传入回调。因此，要么从 fromFile 返回 promise ，要么这样做:

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