Javascript 使用Chai测试HTML元素的值

我正在学习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();                               
    });
  });
});

我已经尝试以这里描述的方式使用chaidom扩展来实现这一点。 然而： 第一个测试通过，但不应通过（页面上的与测试断言的不同）

第二个测试报告了一个错误

错误：超过了15000ms的超时时间。对于异步测试和挂钩，确保调用“done（）”；如果返回承诺，请确保它已解决。

但我认为我在上面正确使用了

done

第三个测试报告了一个错误

uncaughtreferenceerror:documentnotdefined

，这似乎合乎逻辑，但我不确定如何解决它

---

有人就如何正确执行此操作提供建议吗？

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

如果从节点执行HTTP请求并返回HTML响应，则图片中根本没有浏览器，这意味着没有DOM API和

文档

对象，因此

文档未定义错误

---

如果您想在浏览器中进行单元测试。有很多很多方法可以做到这一点，但是试着开始吧。

你好@Stuart我正在做类似的事情，我几乎遇到了同样的问题。从我迄今为止的尝试来看，我发现与chai dom的结合非常有用。 因此，有一个简单的html构造函数来创建如下元素：

function HtmlElement(el) {
  this.element = (el instanceof HTMLElement) ? el : document.createElement(el);
}

HtmlElement.create = function create(el) {
  return new HtmlElement(el);
};

HtmlElement.prototype.addId = function addId(id) {
  this.element.id = id || '';
  return this;
};

…在测试中进一步：

describe("Checks element methods presence on the prototype", function(){
    it('should have addClass method', function () {
    const ul = (new HtmlElement('ul').addId('some'));
    console.log(ul.element);
    ul.element.should.equal(`<ul id="some"></ul>`);
  });
});

description（“检查原型上是否存在元素方法”），函数（）{
它（'应该有addClass方法'，函数（）{
const ul=（新HtmlElement（'ul'）。addId（'some'）；
控制台日志（ul元素）；
ul.element.should.equal（``）；
});
});

---

应该通过。

我使用了

节点html解析器，建议您也这样做：

这是我的密码：

import {parse} from 'node-html-parser';
import {expect} from 'chai';
import {describe, it, before} from 'mocha';
import request from 'supertest';

describe('Page Tests', async function () {
  let page = null;

  before(async function(){
    const response = await request(server).get(workingTestUrl);

    page = parse(response.text);
  })

  it('Should give a person page at test url', async function () {
    const obituarySection = page.querySelector('#main-obituary');

    expect(obituarySection).to.exist;
  }); 
});

非常感谢您花时间发布此消息。将阅读该教程。该教程中没有关于测试HTML的内容。请在执行最后一个断言之前查看，因为它在类型/序列化过程中会引发错误