Ref don't work with mount

[jnak]

I'm not sure if it's expected or not. I created a repro here: https://github.com/jnak/enzyme-rn-ref-repro

Very cool project btw!

[vitalets]

I expect mount should not work as actually mouniting in that case is rendering in native thread.

[RealOrangeOne]

@jnak can you provide more details on this so we can try to replicate and fix it

[chrismcleod]

Same issue, ref is undefined in wrapper instance's componentDidMount. It works when actually running on ios simulator.

COMPONENT

...
componentDidMount() {
  console.log(this.refs); // {}
  console.log(this.nav); // undefined
  this.nav.jumpTo(this.currentRoute); // cannot call method jumpTo on undefined
}
render() {
  return (
    <View style={{ flex: 1 }}>
      <Navigator
        ref={e => this.nav = e}
        renderScene={this.renderScene}
        initialRouteStack={routes}
        sceneStyle={{ flex: 1 }}
        configureScene={() => Object.assign(Navigator.SceneConfigs.HorizontalSwipeJump, { gestures: {} })}
      />
    </View>
  );
}
...

TEST

const view = mount(<MyComponent {...defaultProps} />); // in componentDidMount refs = {}
console.log(view.instance().nav); // undefined

[RealOrangeOne]

i believe passing a string to the refs prop was phased out recently in ReactJS, so react-native has probably followed. I think the problem is that a components ref handler is never called once it's mounted, so 'this.nav' is never set

[chrismcleod]

using old style is a different but similar problem. If i use old-style string ref, this.refs is still {} in componentDidMount, but view.ref("myRef") will return the Navigator wrapper.

[chrismcleod]

It looks like maybe it has something to do with refs that are not the root element. If I move the Navigator to the root element, and use the new style, this.nav is set in componentDidMount. Am I doing something wrong in my test or is this an issue with enzyme?