React changes the html before rendering like changing the styles, adding span tags etc

Question

I am using qunit to test my react component, my first test case is to compare the html react is giving with what i am expecting. I am using React.renderComponentToString method to retrieve html being rendered. However i have noticed, react appends its own classes and styles. so to remove that i used regular expression

var stripReactAttrs = / data-react[-\w]+="[^"]+"/g;

So that I can get original/expected html, but it also does other manipulations like converting space into span tag, removing close input tags. Can someone please confirm me what is it that ReactJS does, so that I can prepare my expected html accordingly and can test my component?

Answer 1

What you're looking for here is actually the React.renderComponentToStaticMarkup function. It'll output html without the special data-react tags etc.

http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup

It's worth noting though, that certain things get wrapped in elements that might not exist in your original JSX (if you are using JSX).

For example react will wrap certain text with to correct your html.

Example:

<div>
    Hello
    <div>World</div>
</div>

will be rendered as:

<div>
    <span>Hello</span>
    <div>World</div>
</div>