如何測試一個React組件是否包含另一個帶有笑話的組件？

我試圖用jest-cli來測試一個反應組件是否包含其輸出中的另一個組件。我無法弄清楚如何做到這一點。如何測試一個React組件是否包含另一個帶有笑話的組件？

這裏是我的部件：

DesignerPage組件

[...] 
var TopBar = require('../components/layout/TopBar.js'); 

var DesignerPage = React.createClass({ 
    getInitialState: function() { 
    var state = { 
    }; 
    return state; 
    }, 
    render: function() { 
    return (
     <div> 
     <TopBar /> 
     </div> 
    ) 
    } 
}); 

module.exports = DesignerPage;

頂欄組件

/** @jsx React.DOM */ 
var React = require("react"); 

var TopBar = React.createClass({ 
    render: function() { 
     return (
      <nav className="top-bar"> 
      </nav> 
     ); 
    } 
}); 

module.exports = TopBar;

現在，我想測試DesignerPage組件是否包含頂欄組件。以下是我認爲應該工作：

/** @jsx React.DOM */ 
jest.dontMock('../../src/js/pages/DesignerPage.js'); 
describe('DesignerPage', function() { 
    it('should contain a TopBar', function() { 
    var React = require('react/addons'); 
    var DesignerPage = require('../../src/js/pages/DesignerPage.js'); 
    var TestUtils = React.addons.TestUtils; 

    // Render a DesignerPage into the document 
    var page = TestUtils.renderIntoDocument(
     <DesignerPage /> 
    ); 

    // Verify that a TopBar is included 
    var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar'); 
    expect(topbar.length).toBe(1); 
    }); 
});

但它不通過... :(

$ ./node_modules/jest-cli/bin/jest.js DesignerPage 
Found 1 matching test... 
FAIL __tests__/pages/DesignerPage-test.js (4.175s) 
● DesignerPage › it should contain a TopBar 
    - Expected: 0 toBe: 1 
     at Spec.<anonymous> (__tests__/pages/DesignerPage-test.js:16:27) 
     at Timer.listOnTimeout [as ontimeout] (timers.js:112:15) 
1 test failed, 0 test passed (1 total) 
Run time: 6.462s

來源

2014-10-10 jasonlfunk

我還沒有使用JEST，但我在這裏沒有看到任何明顯的問題。從閱讀文檔看來，你正在做的事情是正確的。只是以爲我會提到，因爲你沒有在這裏獲得很多的流量。 – 2014-10-12 18:15:13

我沒有運行有問題的代碼，但行：

var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar');

看起來可疑的我。在docs似乎表明，你應該通過一個componentClass而不是字符串。

我看不出它可能如何使用字符串來識別組件類型。它可能會使用displayName通過字符串來識別它，但我懷疑它會這樣做。

我想你可能希望這樣的：

var TopBar = require('../../src/js/pages/DesignerPage'); 
var topbar = TestUtils.scryRenderedComponentsWithType(page, TopBar);

來源

2014-10-20 20:57:47 Tom

我也碰到過類似的情況，我需要檢查，如果子組件正在繪製的對象。據我瞭解，開玩笑所有必需的模塊，除了你指定的模塊之外。所以在你的情況下，子組件Topbar將被嘲笑，這導致我猜測呈現的DOM不會如預期的那樣。

至於檢查，如果孩子組件呈現，我會做

expect(require('../../src/js/component/layout/TopBar.js').mock.calls.length).toBe(1)

如果嘲笑子組件被調用與否，基本上檢查。

如果你真的想測試頂欄組件在這個級別的輸出，你可能會想設置

jest.dontMock('../../src/js/component/layout/TopBar.js')

也告訴開玩笑不要嘲笑頂欄組件，從而使渲染的DOM還包括TopBar組件的輸出。

我已經創建了一個基於您的示例在Github測試子組件的回購。有兩個測試文件，一個用於測試被嘲笑的子組件，另一個不嘲弄子組件。

來源

2014-10-22 04:55:54 nimgrg

提供一個完整的例子的偉大工作！ – ptim 2015-04-12 06:29:21

如何測試一個React組件是否包含另一個帶有笑話的組件？

回答

相關問題