使用酶，如何在组件反应本机中找到子组件

Question

我是 React-native 和 enzyme 的新手，我想在这里创建一个自定义组件。我将显示基于 this.props.hasIcon 的图像。我将 hasIcon 的默认道具值设置为 true。当我检查酶 ShallowWrapper 中是否存在 Image 时。我得到 false.

tlProgress.js

class TLProgress extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.renderImage}
        {this.renderProgress}
      </View>
    );
  }
}

TLProgress.defaultProps = {
  icon: require("./../../img/logo.png"),
  indeterminate: true,
  progressColor: Colors.TLColorAccent,
  hasIcon: true,
  progressType: "bar"
};

和renderImage()有Image

renderImage() {
    if (this.props.hasIcon) {
      return <Image style={styles.logoStyle} source={this.props.icon} />;
    }
}

现在，如果我检查 Image 存在于酶中，我就会变得错误。

tlProgress.test.js

describe("tlProgress rendering ", () => {
    let wrapper;
    beforeAll(() => {
        props = { indeterminate: false };
        wrapper = shallow(<TLProgress {...props} />);
    });

    it("check progress has app icon", () => {
        expect(wrapper.find("Image").exists()).toBe(true); // fails here..
    });
});

Answer 1

您正在搜索名为 'Image' 的标签，而不是查找您的组件图片

应该是：

import Image from '../Image';
wrapper.find(Image) //do your assert here

Answer 2

您没有在 render() 中调用 renderImage 函数——您忘记了括号，因此它被解释为未定义的变量。

它应该是：（我假设你想调用 renderProgress() 而不是 renderProgress）

class TLProgress extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this.renderImage()}
        {this.renderProgress()}
      </View>
    );
  }

使用酶，如何在组件反应本机中找到子组件

Using enzyme, How to find a child component in a component react-native

javascript

reactjs

react-native

enzyme