Edge case with empty elements

[MoOx]

I am using tape-jsx-equals and have the following code

  renderer.render(
    <Picture />
  )
  t.jsxEquals(
    renderer.getRenderOutput(),
    <div></div>,
    "should render nothing if nothing is passed as props"
  )

(I only pasted the relevant part of my code)

The issue I get is:

    expected: '<div />'
    actual:   '<div>\n  \n</div>'

The expected result I wrote is <div></div>, but somehow it got transformed to <div />. Maybe by babel.

Maybe <div>{whitespace}</div> should be rendered to <div />?

[vvo]

Do you think you can write a test and submit it? Adding a new test is REALLY easy.

Thanks for the bur report thought

[MoOx]

Done in #7
I think both tests in this section should works. But maybe I am wrong :)

[vvo]

both tests

Both? I see one test

[MoOx]

The one added and the one just before it.

[vvo]

Strangely your actual failing test in the issue description should work. But what you added can't. I chose to have a consistant resulting string because in the end when you compare JSX you won't have this issue.

The added test case is not the one we are looking for I think.

I will create a custom component rendering a <div></div> and see how it goes.

[vvo]

Maybe

{whitespace}

should be rendered to

?

So if you picture element is inserting line breaks inside the <div></div> then you need to assert for it because that's not the same thing as an empty <div/>.

I am the only transforming <div></div> (JSX) to <div /> for ease of comparing strings and because I cannot know from the React element that it was written as <div></div> or <div />.

But in your case, you do have line breaks in the render() so you should test for it. You could also implement toIncludeJSX as I did in expect-jsx: https://github.com/algolia/expect-jsx/blob/master/index.js#L22

It should remove the line breaks, not sure thought

[vvo]

Maybe we could add an option to remove line breaks/whitespace from empty elements, happy to take a PR on this but unsure this is the right move (and it would be an option).

[MoOx]

The thing is: my <Picture /> with no props was rendering a <div><div/>

  render() {
    return (
      <div>
       {
         /* falsy thing */
       }
      </div>
    )
  }

[vvo]

But in an html page, does it renders as <div></div> or <div>\n \n<div>?

[vvo]

It seems babel transform thinks it's the same to write <div></div> or <div>\n \n</div> so we might have to do something here yes

[vvo]

So both line breaks and whitespace are working BUT

<div>{false}</div>

Is outputed as <div>\n\n</div>. I wonder if we need to fix this, there's still a difference between <div>{false}</div> and <div></div>