遍歷與DOM陣營JS

我試圖通過測試JS做出反應產生的這片HTML的：遍歷與DOM陣營JS

<div class="media-img"> 
    <img src='images-name.jpg' /> 
</div>

正如你所看到的圖像沒有類的名字，我不能把一個上。我正在使用Jasmine來嘗試測試圖像的src是否正確。但我似乎無法掌握React中的圖像元素。在jQuery中，這很容易，我可以使用$（'.media-img img'），有沒有一種方法可以遍歷React中的DOM？

這是我到目前爲止有：

var React = require('react'), 
    TestUtils = React.addons.TestUtils, 
    Component = require('component'), 
    renderedComponent; 

function renderComponent(data) { 
    data = data || {}; 
    renderedComponent = TestUtils.renderIntoDocument(
     React.createElement(Component, data) 
    ); 
} 

var imageURL = 'http://lorempixel.com/g/400/200/', 
    image, 
    imageSection; 

renderComponent({ 
    src: imageURL 
}); 

imageSection = TestUtils.scryRenderedComponentsWithType(renderedComponent, 'media-img'); 
image = TestUtils.findRenderedDOMComponentWithTag(imageSection, 'img'); 

expect(image.src).toBe(imageURL);

但它無法正常工作。看起來你不能將React組件傳遞到另一個組件，因爲我試圖在底部做。那麼如何遍歷虛擬DOM？

來源

2014-11-25 Stormdamage

普羅蒂普：沒有測試DOM - 直接測試你的組件。 – 2014-11-25 11:38:58

如何直接測試組件？我無法抓住圖像組件來測試它。 – Stormdamage 2014-11-25 15:09:02

我找到了答案。與其試圖將React組件傳遞到另一個組件以測試呈現的DOM的子部分，我是通過整個呈現的DOM查看'img'。通常情況下，由於渲染的DOM可能非常龐大且充滿'img'標籤，因此效率會有點低，但由於這是一個數據量有限的單元測試，因此渲染的DOM很小且可預測。我用這個：

image = TestUtils.findRenderedDOMComponentWithTag(renderedContributor, 'img');

然後我根本不需要'imageSection'變量。然後，我可以叫DOM節點，然後看它的「src」中，加入：

image.getDOMNode().src;

所以我完全修正的代碼如下所示：

var React = require('react'), 
    TestUtils = React.addons.TestUtils, 
    Component = require('component'), 
    renderedComponent; 

function renderComponent(data) { 
    data = data || {}; 
    renderedComponent = TestUtils.renderIntoDocument(
     React.createElement(Component, data) 
    ); 
} 

var imageURL = 'http://lorempixel.com/g/400/200/', 
    image; 

renderComponent({ 
    src: imageURL 
}); 

image = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, 'img'); 

expect(image.getDOMNode().src).toBe(imageURL);

來源

2014-11-25 15:20:09 Stormdamage

遍歷與DOM陣營JS

回答

相關問題