Как использовать refs в реакциях на родные ферментные тесты при установке с jsdom?

Question

При установке компонента (с использованием jsdom) с дочерним компонентом, который имеет ref = "nav", я ожидаю, что this.refs.nav будет дочерним навигатором в компонентеDidMount. Я получаю пустой объект this.refs, когда я console.log (this.refs) в componentDidMount.

Компонент ниже отображает и отлично работает в симуляторе ios, однако refs пустые с использованием фермента. Я также заметил, что если у меня есть ссылка на корневой элемент, то конкретный ref равен, определенному в компонентеDidMount.

Я использую:

"react": "^15.4.1", 
"react-native": "^0.39.2", 
"chai": "^3.5.0", 
"enzyme": "^2.7.0", 
"jsdom": "^9.9.1", 
"mocha": "^3.2.0", 
"react-native-mock": "^0.2.9" 

setup.js проходит перед всеми испытаниями

var jsdom = require('jsdom').jsdom; 
global.__DEV__ = true; 
global.document = jsdom(''); 
global.window = document.defaultView; 
Object.keys(document.defaultView).forEach((property) => { 
    if (typeof global[property] === 'undefined') { 
    global[property] = document.defaultView[property]; 
    } 
}); 
global.navigator = { 
    userAgent: 'node.js' 
}; 
require("react-native-mock/mock"); 

TEST

describe("MyComponent", function() { 
    it("does a thing", function() { 
    const view = mount(<MyComponent/>); 
    expect(...); 
    }); 
}); 

КОМПОНЕНТ

const routes = [ 
    {id: "location", index: 0}, 
    {id: "rate", index: 1}, 
    {id: "genres", index: 2}, 
    {id: "availabilities", index: 3} 
]; 

class MyComponent extends React.Component { 
    componentDidMount() { 
    console.log(this.refs); // {} 
    } 

    renderScene() { 
    return return <Button ref="test" title="Hello" onPress={() => { } } />; 
    } 

    render() { 
    return (
     <View style={{ flex: 1 }}> 
     <Navigator 
      ref="nav" 
      renderScene={this.renderScene} 
      initialRouteStack={routes} 
      sceneStyle={{ flex: 1 }} 
      configureScene={() => Object.assign(Navigator.SceneConfigs.HorizontalSwipeJump, { gestures: {} })} 
     /> 
     <TouchableHighlight ref="prev" key="prev" onPress={this.handlePressPrev}> 
      <Text>Prev</Text> 
     </TouchableHighlight> 
     <TouchableHighlight ref ="next" key="next" onPress={this.handlePressNext}> 
      <Text>Next</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 

} 

Answer 1

this.refs является пустым, так как исх относится к компоненту, который навигатор не оказанной, который не отображается.

Возможно, вы заметили, что у ShallowRenderer нет документов для метода ref(), в то время как MounedRenderer делает. Если вы хотите протестировать refs, вам нужно подключиться.

В случае компонента навигатора вы должны указать параметр ref каждому компоненту в функции renderscene().