Variables in JSX strings put on new line

[thchia]

• react-testing-library version: 2.1.0
• node version: 8.9.3
• npm (or yarn) version: yarn 1.3.2

Relevant code or config

Component to be tested:

const Component = ({ currentStep }) => <div>Step {currentStep} of 4</div>

What you did:

Test code:

const { getByText } = render(<Component currentStep={1} />)

expect(getByText('Step 1 of 4')).toBeDefined()

What happened:

Unable to find an element with the text: Step 1 of 4. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

<div>
    Step
    1 // <--------- newline
      of 4
 </div>

Reproduction repository:

This can be reproduced in the current repository test cases by inserting a variable into the JSX.

Problem description:

Variables in JSX strings cause new line issues (and failing tests). I believe that in the spirit of "not testing implementation details", this should be considered a harmful problem. If I add an extra space around the "1", the test passes (period signifies space):

expect(getByText('Step..1..of 4')).toBeDefined() // passing

Suggested solution:

I don't know why this is happening, but I'm guessing it is something to do with how the component is being serialised. I'm also guessing that this issue should be here and not dom-testing-library but I don't know for sure where the root of the problem lies.

[gnapse]

Given that in html any extra whitespace between words in text is not meaningful, and the resulting text shown to the user on screen is what you expect in your test above, I think it makes sense to take this into account when matching an element's text content.

Actually I am now wondering if .toHaveTextContent should also take this into account.

[kentcdodds]

Yes. We should update the matcher function in dom-testing-library to replace multiple spaces with one before it attempts to do any comparison. I consider this a bug and would love a pull request for it 👍

[gnapse]

I'll take it, since I'll probably also have to do this to jest-dom's .toHaveTextContent ;)

(BTW, this is really a PR for dom-testing-library)

[DarrylD]

I'm still having this issue, any idea why it would continue to add white spaces? Updated to the latest dom-testing-library.

[gnapse]

@DarrylD your best bet for others to be able to help is to provide a sample repository or codesandbox where the problem can be reproduced.

[maxcct]

I have also continued to experience the same issue, and was able to diagnose it (as far as my case goes, at least).

The problem is that the amendment to getText presupposes that when text is divided over multiple lines, the text on each line will constitute a separate word. Things go wrong when this is not the case; for example:

Pay
£
24.99

will end up as Pay £ 24.99. This problem is remedied if line 73 here is changed from .join(' ') to .join('').

Then, however, you'd be required to ensure a space is present after each separate word that's on a different line, so Pay would have to be Pay (i.e. with a space after it on the same line) in my example. Otherwise, there's no way to differentiate between words on different lines that should be separated by spaces on the one hand, and word fragments/characters on separate lines that should be concatenated on the other.

But I'm not really proposing this change be made, as you shouldn't have to ensure those spaces are present in your JSX.

[kentcdodds]

This is actually how HTML works. If you were to put this in the DOM:

<div>
Pay
£
24.99
</div>

The resulting output would appear to the user as:

Pay £ 24.99

This is why we do the join(' ') in dom-testing-library.

[maxcct]

That is a very good point. I guess then all you can do is ensure that you concatenate strings like this before inserting them into JSX.

[bdchauvette]

I'm running into the same problem, even with strings that don't have a space between the variable and normal text, e.g. <span>{volts}V<span>.

In this situation, the DOM node's textContent property contains a string without spaces, even though there are two Text nodes behind the scenes.

Live example: https://codesandbox.io/s/w718n5ojq7

[kentcdodds]

Ah, this is tricky! What do you propose?

[bdchauvette]

Good question!

I'm not at all familiar with the internals of this library, but following @maxcct's lead, replacing join(' ') with join('') in getNodeText seems to do the trick.

I haven't made a proper fork of dom-testing-library yet, but I checked out master, ran the test suite locally with this change, and everything still passed.

I also wrote a quick (passing 🙌) test to see if the change works as expected across text nodes:

test('can get elements by matching their text across adjacent text nodes', () => {
  const textDiv = document.createElement('div')
  const textNodeContent = ['£', '24', '.', '99']
  textNodeContent
    .map(text => document.createTextNode(text))
    .forEach(textNode => textDiv.appendChild(textNode))

  const {container, queryByText} = render('<div />')
  container.appendChild(textDiv)
  expect(queryByText('£24.99')).toBeInTheDOM()
})

In any event, since this issue doesn't seem specific to React, maybe it would be better to move the discussion over to an issue and/or PR in dom-testing-library?

[kentcdodds]

Yeah, this should be talked about in dom-testing-library. Could you make a PR there and we can discuss how to solve this there. Thanks!