Làm thế nào để kiểm tra xem một thành phần React có chứa một thành phần khác với jest không?

Question

Tôi đang cố gắng sử dụng jest-cli để kiểm tra xem một trong những thành phần phản ứng có chứa một thành phần khác trong đầu ra của nó hay không. Tôi đang gặp khó khăn trong việc tìm ra cách để làm điều này.

Dưới đây là các thành phần của tôi:

DesignerPage Component

[...] 
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; 

TopBar Component

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

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

module.exports = TopBar; 

Bây giờ, tôi muốn kiểm tra xem các thành phần DesignerPage chứa các thành phần TopBar. Dưới đây là những gì tôi nghĩ nên làm việc:

/** @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); 
    }); 
}); 

Nhưng nó không vượt qua ... :(

$ ./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 

Answer 1

tôi đã không chạy mã trong câu hỏi nhưng dòng:

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

có vẻ nghi ngờ đối với tôi. docs dường như đề nghị bạn nên vượt qua componentClass thay vì chuỗi.

Tôi không thấy làm thế nào nó có thể có thể sử dụng chuỗi để xác định loại thành phần. Nó có khả năng có thể sử dụng các displayName để xác định nó bằng chuỗi, nhưng tôi nghi ngờ nó sẽ làm điều đó.

Tôi nghĩ bạn có thể muốn điều này:

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

Answer 2

Tôi đã đi qua một tình huống tương tự mà tôi cần phải kiểm tra xem các thành phần con đã được trả lại hay không. Theo như tôi hiểu jest mocks tất cả các mô-đun cần thiết ngoại trừ một trong những nơi mà bạn chỉ định không. Vì vậy, trong trường hợp của bạn, thành phần con Topbar sẽ được chế nhạo dẫn tôi đoán rằng DOM được hiển thị sẽ không như mong đợi.

Đối với kiểm tra nếu các thành phần đứa trẻ được trả lại tôi sẽ làm

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

mà về cơ bản kiểm tra nếu các thành phần con chế giễu đã được gọi hay không.

Nếu bạn thực sự muốn kiểm tra đầu ra TopBar thành phần của ở cấp độ này có thể bạn sẽ muốn thiết lập

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

cũng như để nói jest không nhạo báng các thành phần TopBar, do đó kết xuất DOM bao gồm đầu ra từ thành phần TopBar.

Tôi đã tạo một repo dựa trên ví dụ của bạn tại Github kiểm tra các thành phần con. Có hai bài kiểm tra một bài kiểm tra cho các thành phần con được chế giễu và một bài kiểm tra khác không mô phỏng thành phần con.