使用 jsdom 挂载时，如何在反应原生酶测试中使用 refs

Question

当使用具有ref="nav"的子组件挂载组件（使用jsdom）时，我希望this.refs.nav是componentDidMount中的子导航器。 当我在componentDidMount中控制台.log（this.refs）时，我得到空白的this.refs对象。

下面的组件在ios模拟器中渲染并工作正常，但是使用酶的安装时refs是空白的。 我还注意到，如果我在根元素上有一个 ref，则该特定 ref 是在 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"

设置.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");

测试

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 是空白的，因为 ref 属于未呈现且未呈现的导航器组件。

你可能已经注意到，ShallowRenderer没有ref（）方法的文档，而MounedRenderer有。如果你想测试引用，你必须挂载。

对于导航器组件，您需要ref函数中的每个组件提供参数renderscene()。