摩卡：如何測試快速渲染的視圖

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屬性）