Mocha:如何测试Express渲染视图

Question

- 背景

我正在尝试测试Express应用程序.这对我来说是一个爱好项目,所以我没有使用Express来提供JSON api(通常这样做).

- 问题

问题是,我无法找到一种方法来测试视图的内容,以确保页面实际上是针对项目本身的视图文件呈现的.

- 我试过的

例如,我无法测试一个简单的索引页面,因为该jade文件以extends layout.这使得难以测试是否呈现动态内容.

有没有人建议测试视图是否实际呈现？

it ('renders the index page', function(done) {
  var jade = require('jade');
  var should = require('should');
  var fs = require('fs');

  supertest(app)
    .get('/')
    .expect(200)
    .end(function(err, res) {
      var rawJade = fs.readFileSync('./views/index.jade').toString();
      res.text.should.equal(rawJade.convertToHtml()); // jade supports a function like this
    });
)};

Answer 1

像往常一样，有多种方法可以解决这个问题。在继续之前，我鼓励您问自己为什么需要这样做。像这样的测试非常变化无常。如果你做了一些微小的改变，它将迫使你重写现在失败的测试。

也就是说，我认为开始添加断言正确渲染的测试的最简单方法是使用https://github.com/cheeriojs/cheerio

一个基本示例如下所示：

it ('renders the index page', function(done) {
  var should = require('should');
  var cheerio = require('cheerio');

  supertest(app)
    .get('/')
    .expect(200)
    .end(function(err, res) {
      err.should.not.be.ok();
      res.should.be.ok();
    
      var $ = cheerio.load(res.body);
      var header = $('h1:first');
      header.should.equal('Hello World!');
    
      done();
    });
)};

现在您不会测试渲染的视图是否看起来完全像您想要的（我的意思是您可以，但这会很乏味）。但这也意味着，如果你做了一些无关紧要的小改变，整个事情就不会崩溃。相反，您可以专注于测试 UI 的关键方面是否正确呈现（例如，页面标题在那里，具有正确的拼写和 class/id 属性）