jsdom으로 마운트 할 때 반응 네이티브 효소 테스트에서 refs를 어떻게 사용합니까?

Question

ref = "nav"가있는 하위 구성 요소와 함께 jsdom을 사용하여 구성 요소를 마운트하는 경우 this.refs.nav가 componentDidMount의 하위 네비게이터가 될 것으로 기대합니다. componentDidMount에 console.log (this.refs)가있을 때 나는 this.refs 객체를 비워 둡니다.

아래의 구성 요소는 ios 시뮬레이터에서 잘 작동하지만 효소 마운트를 사용하여 공백으로 표시됩니다. 또한 루트 요소에 대한 참조가있는 경우 해당 특정 참조 이 componentDidMount에 정의 된임을 알게되었습니다.

내가 사용하고 있습니다 :

"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 COMPONENT가 비어 있습니다.

MounedRenderer가 수행하는 동안 ShallowRenderer에 ref() 메소드에 대한 문서가 없다는 것을 알았을 수 있습니다. refs를 테스트하려면 마운트해야합니다.

네비게이터 구성 요소의 경우 renderscene()의 모든 구성 요소에 ref 매개 변수를 제공해야합니다.