v3.0 fails to find components wrapped in conditional rendering logic

[asdf123101]

Given a component looks like this.

const Conditional = ({ isActive }) =>
  isActive && (
    <span>
     Some text
    </span>
  )

export default class Example extends React.Component {
  state = { isActive: false }

  handleClick = () => {
    this.setState({ isActive: true })
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Show
        </button>
        <Conditional
          isActive={this.state.isActive}
        />
      </div>
    )
  }
}

Enzyme 3.0 fails to find the <span/> in the Conditional component,

const wrapper = mount(<Example />)
wrapper.find(button).simulate('click')
console.log(wrapper.find(conditional))  // true
console.log(wrapper.find('span'))  //null

This pattern worked in v2.x.

Curiously, if isActive is explicitly set to true , enzyme can find the <span />.

[asdf123101]

I think this issue is a duplicate of #1163

[elyobo]

It seems that you need to call wrapper.update() explicitly and that even then it fails in some situations.

[ovidiuch]

It seems that you need to call wrapper.update() explicitly and that even then it fails in some situations.

Do you know which are those situations?

I'm currently in a situation where the render tree doesn't update even after calling wrapper.update(). I can tell that the render tree is out of sync because I find the right values when I look at instances directly. Eg.

wrapper.update();
wrapper.find(ChildComponent).instance().props.value; // correct, updated value
wrapper.find(ChildComponent).prop('value'); // wrong, stale value

Since I cannot call wrapper.find(ChildComponent).update(), what could be done in this situation?

[asdf123101]

@skidding Check out the discussions in #1163. I don't think calling update() would help.

[jamesopti]

I confirmed this issue is fixed for me by locally patching Merge pull request #1169 from neoziro/react-16-updated-props

[lelandrichardson]

This is hopefully fixed in enzyme-adapter-react-16@1.0.1. Please upgrade and let us know if it does not fix your issue. Thanks!

[Venskiy]

@lelandrichardson It fixed the same issue for me. Thanks a lot:)

[Faradey27]

@lelandrichardson i m still able to reproduce this issue on

"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
"react-test-renderer": "~15.6.0",
 "react": "^16.2.0",
  "react-dom": "^16.2.0",

part of code that cause problem:

renderPaymentMethodComponentByType = () => {
    if (this.state.isLoadingLanguage || !this.payments) {
      return <Loader />;
    }

    const { paymentMethod } = this.props.paymentMethod;
    switch (paymentMethod) {
      case 'creditCard': {
        return (
          <CreditCard
            renderPaymentMethod={this.renderPaymentMethod}
          />
        );
      }
      case 'offline': {
        return (
...

Then, if i will do mount().html() i will see that everything is fine, but i will be not able to find CreditCard component by id or any selector.

After removing if condition(with returning of Loader) tests wil pass.

trick with mount().update() helping, but this is a trick

[Faradey27]

Can we reopen an issue?

[Faradey27]

@asdf123101

[asdf123101]

@Faradey27 Can you try using the latest test-renderer? I think 15.6 only works with react v15.6.

[ljharb]

@asdf123101 @Faradey27 actually, you should remove the test renderer entirely with react 16; it's only a peer dep for < 16.