遍历与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

回答

相关问题