使用React JS遍历DOM

Question

I am trying to test this piece of HTML generated by React JS:

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

As you can see, the image has no class name, and I can't put one on. I am using Jasmine to try and test that the src of the image is correct. But I can't seem to get hold of the image element in React. In jQuery this would be really easy, I could use $('.media-img img'), is there a way to traverse the DOM in React?

This is what I have so far:

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

But it isn't working. It seems that you can't pass a React component into another as I've tried to do at the bottom. So how can you traverse the virtual DOM?

Answer 1

I found an answer. Instead of attempting to pass a React component into another to test a subsection of the rendered DOM, I looked through the entire rendered DOM for 'img'. Normally this would be a bit inefficient as the rendered DOM could be huge and full of 'img' tags, but as this is a unit test with limited data, the rendered DOM is small and predictable. I used this:

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

Then I didn't need the 'imageSection' variable at all. Then I could call the DOM Node, then look at its 'src', by adding:

image.getDOMNode().src;

So my complete amended code looks like this:

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