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

你没有在render（）中调用renderImage函数 - 你忘了括号，因此它被解释为一个未定义的变量。

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

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

Answer 2

您正在搜索名为＆＃39; Image＆＃39;而不是寻找你的组件Image

应该是：

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

使用酶，如何在组件中找到反应原生的子组件

2 个答案: