javascript - 使用 Chai 测试 HTML 元素的值

Question

我正在学习 Mocha 和 Chai，并且正在尝试编写一个测试来检查页面上 H1 标记的值。我有下面的测试，它试图以三种方式做到这一点:

const expect  = require('chai').expect;
const assert = require('chai').assert;
const request = require('request');
const chaiHttp = require('chai-http');
const app = require('../../app');
const chai = require('chai');
chai.use(require('chai-dom'));
chai.use(chaiHttp);

//first attempt
describe('Story Homepage', function(){
  it('Should have an H1 of My Home Page', function(){
  chai.request(app)
  .get('/', function (){
     expect(document.querySelector('h1')).should.have.text('My Home Page');
     });
  })
});

//second attempt
describe('Story Page Tests', function () {
it('Homepage H1 is My Home Page', function(done) { 
    chai.request(app)
    .get('/', function(done){
      expect(document.querySelector('h1').should.have.text('My Home Page'));
      done(); 
    })
  });
});


//third attempt
describe('Story Page Tests', function () {
  it('Homepage H1 is My Home Page', function(done) { 
      chai.request(app)
      .get('/')
      .end(function(err, res) {
        expect(document.querySelector('h1').should.have.text('My Home Page'));
      done();                               
    });
  });
});

我已尝试按照此处描述的方式使用 chai-dom 扩展 https://github.com/nathanboktae/chai-dom#texttext去做这个。然而:第一次测试通过但不应该通过(页面上的和测试断言的不一样)

第二个测试报告错误 Error: Timeout of 15000ms exceeded.对于异步测试和 Hook ，确保调用“done()”；如果返回 Promise，请确保它已解析。 但我认为我在上面正确使用了 done。

第三个测试报告了一个错误 Uncaught ReferenceError: document is not defined 这看起来合乎逻辑，但我不确定如何解决它。

有没有人提供有关如何正确执行此操作的建议？

Answer 1

从异步 mocha 测试的 Angular 来看，您的第三次尝试是正确编写的，但是您有一个基本问题，因为据我所知，您正在 Node.js 中运行测试，并且您正在编写断言代码，就像它在浏览器。

如果您正在从节点执行 HTTP 请求并返回 HTML 响应，则图片中根本没有浏览器，这意味着没有 DOM API 也没有 document 对象，因此您的 文档未定义错误。

如果你想在浏览器中做单元测试。有很多很多方法可以做到这一点，但请尝试 a simple tutorial like this开始。