使用 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();                               
    });
  });
});

我已尝试以此处https://github.com/nathanboktae/chai-dom#texttext 所述的方式使用 chai-dom 扩展来执行此操作。 然而： 第一个测试通过但不应该通过（页面上的 与测试断言的不一样）

第二个测试报告错误Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.，但我认为我在上面正确使用了done。

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

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

Answer 1

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

如果您从节点发出 HTTP 请求并返回 HTML 响应，则图片中根本没有浏览器，这意味着没有 DOM API 和 document 对象，因此您的 document is not defined error。

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

Answer 2

你好@Stuart，我正在做类似的事情，我遇到了几乎同样的问题。到目前为止，我发现JS-DOM 与 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>`);
  });
});

应该会通过。

Answer 3

我使用了node-html-parser，并建议您这样做： https://www.npmjs.com/package/node-html-parser

这是我的代码：

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