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

使用 Chai 测试 HTML 元素的值

Using Chai to test value of HTML element

javascript

tdd

mocha.js

express

chai