I found myself testing a component with nested components which I decided to mock. The component also returns a "lot" of html. That is why I decided to test the component contains certain pieces instead of for equality.
This is a valid example of the issue:
class MyComponent extends Component {
render({imgUrl}) {
return (
<div>
<img src={imgUrl}/>
</div>
)
}
}
expect(<MyComponent imgUrl="http://url" />).to.contain(
<img src="http://url"/>
)
The test will fail due to rendering of MyComponent vs. the contained render indents differ. See:
MyComponent output:
<div>
<img src="http://url"/>
</img>
</div>
Test JSX output:
<img src="http://url"/>
</img>
I think the easiest fix is to prevent indentation when using contains test. Output will not look nice but would still allow to have the test passing.
I found myself testing a
componentwith nested components which I decided to mock. Thecomponentalso returns a "lot" of html. That is why I decided to test the component contains certain pieces instead of for equality.This is a valid example of the issue:
The test will fail due to rendering of
MyComponentvs. the contained render indents differ. See:MyComponentoutput:Test JSX output:
I think the easiest fix is to prevent indentation when using
containstest. Output will not look nice but would still allow to have the test passing.