Enzyme: white space normalizing for text() function on mounted component (  appeared as /xa0)

[idanilt]

I did a simple test with text() using jest and it was failing unexpectedly:

Error: expect(received).toBe(expected)

Expected value to be (using ===):
  "Tomorrow 3:15:02 PM"
Received:
  "Tomorrow 3:15:02 PM"
Expected :Tomorrow 3:15:02 PM
Actual   :Tomorrow 3:15:02 PM

When I checked I saw that the expect space was \x20 and the text() space was \xa0
After the some digging I saw that   was translated to \xa0

I saw that text() function for shallow component is normalized and mounted is without nothing

// shallow
  text() {
    return this.single('text', getTextFromNode);
  }
export function getTextFromNode(node) {
  ...
 return childrenOfNode(node).map(getTextFromNode)
    .join('')
    .replace(/\s+/, ' ');  // this is solve this problem...
}
// mounted
  text() {
    return this.single('text', n => findDOMNode(n).textContent);
  }

So shallow component handle this problem and also replacing multiple spaces with single one
I thing this behavior should be also for mounted components

[ljharb]

This isn't actually to "solve" this problem, the replacement is meant to simulate browser behavior of collapsing multiple whitespaces into one.

In fact, that shallow causes a   to be erased is a bug, and needs to be fixed.

[ljharb]

I did some digging and I'm not quite sure where the fix should go; linking to https://github.com/facebook/react/pull/480#issuecomment-31296039 for posterity.

[idanilt]

I see your point.

My original issue was regarding   it can take some time to figure it's using different character.
It would be nice if you can even just document it and put some comment in the documention
I understand this behavior originated from React/Browsers and not by Enzyme, but still it's the first place I looked...

I am expecting text() function to act like text() function of other projects that scrape text from HTML and not like the browsers are rendering.
In the end I use it for testing and it's easier to work with predictable and simple stuff.

Anyway the regex is far off from the link you shared

[idanilt]

I have created PR Change ShallowWrapper.text() trim spaces with same behavior as ReactWrapper.text()

[ljharb]

Closed in #1350.

[nelsonchen90]

I also saw something similar with shallow:
Enzyme: 3.3.0
Adapter: "enzyme-adapter-react-16": "1.1.1",

// component
const Foo = () => (
  <div className={styles.foo}>
    &nbsp;
  </div>
);


// test
 const container = shallow(<Foo />);
  expect(container.find(`.${styles.foo}`).text().toString()).toEqual(' ');


// test result
expect(received).toEqual(expected)

    Expected value to equal:
      " "
    Received:
      " "

[ljharb]

whoops, https://github.com/airbnb/enzyme/issues/1349#issuecomment-344526194 was meant to close this.

@nelsonchen90 can you file a new issue for that?

[rardoz]

For now this works

expect(container.find(`.${styles.foo}`).text()).toEqual('\u00a0');

Basically nbsps translate to this unix code \u00a0

[andrewsteadcc]

It is probably too late but just in case I came across this problem when unit testing and found that I needed to import "render" in enzyme for it to check the spacing issue properly

import { mount, render } from 'enzyme';

[rardoz]

A year and a half later I googled and found my own answer.

[renjithspace]

For now this works

expect(container.find(`.${styles.foo}`).text()).toEqual('\u00a0');

Basically nbsps translate to this unix code \u00a0

@rardoz Thanks. Working perfectly.