使用React JS遍历DOM

Question

我正在尝试测试React JS生成的这段HTML：

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

如您所见，该图像没有类名，我不能穿上它。 我正在使用Jasmine尝试测试图像的src是否正确。 但是我似乎无法掌握React中的image元素。 在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？

Answer 1

我找到了答案。 我没有尝试将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);