Question

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

<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呢？

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);

使用React JS遍历DOM

1 个答案: