Style wrapping in 1.0 breaks Enzyme’s `text()` assertions

When using shallow rendering, Enzyme lets us easily use text() or contain.text() assertions to check on textual content that is the entire set of child nodes for the node being tested. Material-UI’s Typography component seems to break it.

For instance, if my component looked like this with Material UI pre-1.0:

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Pre-1.0, we didn’t need Typography all over the place, font styling cascaded. So my component would have looked like this:

    <div className="goal">
      <div className="summary">
        <h2>{name}</h2>
        <Gauge value={progress} max={target} />
        <small>{progress} {units} sur {target}</small>
      </div>
      <div className="cta">{adderComponent}</div>
    </div>

And I was able to smoothly do:

const wrapper = shallow(<GoalTrackerWidget goal={goal} progress={progress} />)
expect(wrapper.find('h2')).to.have.text(goal.name)
expect(wrapper).to.contain.text(`${progress} ${goal.units} sur ${goal.target}`)

In 1.0, my component has to look like this:

    <div className="goal">
      <div className="summary">
        <Typography variant="title" component="h2">{name}</Typography>
        <Gauge value={progress} max={target} />
        <Typography component="small">{progress} {units} sur {target}</Typography>
      </div>
      <div className="cta">{adderComponent}</div>
    </div>

And I would absolutely expect to be able to do this:

const wrapper = shallow(<GoalTrackerWidget goal={goal} progress={progress} />)
expect(wrapper.find('Typography[component="h2"]')).to.have.text(goal.name)
expect(wrapper).to.contain.text(`${progress} ${goal.units} sur ${goal.target}`)

If necessary, by using shallow = createShallow({ untilSelector: 'WithStyles' }) instead of Enzyme’s built-in shallow.

Current Behavior

However much I try, tweaking createShallow options (adding dive: true or not, etc.), when I stumble on a Typography component, its stated text is always <WithStyles(Typography) />, regardless of actual content. It nevers provides its child text as part of its shallow rendering. I have to resort to some klunky code much like the one found in your own test suites, like:

expect(wrapper.find('.name').childAt(0)).to.have.text(goal.name)
expect(wrapper.find('.details').children().map((c) => c.text()).join('')).to.equal(
  `${progress} ${goal.units} sur ${goal.target}`
)

(that latter expression doesn’t even work properly, as a shallow wrapper node over a number doesn’t yield the proper text, apparently)

Steps to Reproduce (for bugs)

1. Go to this Codesandbox
2. Wait for full module transpiling, and tests to run
3. Check the console tab: it displays the debug() view of the Typography node. You can clearly see it has a single text child with “Material-UI”.
4. Check the test output: the wrapper’s text() result is a fixed, context-free <WithStyles(Typography) />, instead of the node’s actual text contents.

Context

This completely impedes my ability to test the presence of text contents / fragments inside my React components.

Your Environment

Tech	Version
Material-UI	v1.2.1
React	v16.4.1
Enzyme	v4.19.1
Jest	v23.1.0

[oliviertassinari]

@tdd Thanks for opening this issue. Digging more into it, I start to believe it’s enzyme related. The behavior difference v0.x and v1.x can be expected. The large majorities of the v1.x component are now exported with a withStyles() higher-order component. It’s changing the enzyme behavior. Using createShallow won’t help.

This comment might give us some light 💡: https://github.com/airbnb/enzyme/issues/692#issuecomment-261407772. The best solution I can think of is:

-expect(typoElement.text()).toEqual("Material-UI");
+expect(typoElement.children().text()).toEqual("Material-UI");

https://codesandbox.io/s/q3w4r2o89j

[tdd]

That is so weird, it b0rks on my own code when I get multiple children like this…?