我怎样才能用玩笑来遵守这个组件测试

Question

我有一个带有一些道具的组件，但是当我想测试他是否渲染时，测试失败并且我收到以下错误消息：“TypeError: Cannot read property 'name' of undefined”

这是我的组件：

  render(){
   const character = this.props.character ? this.props.character : null;
   const characterName = this.props.character.name ? 
   this.props.character.name : null;
 const characterStatus = this.props.character.status  ? 
   this.props.character.status : null;

return(
  <TouchableOpacity 
  onPress={() => {}}
  style={styles.item_container}
  >
    <Image style={styles.image} source={{uri: character.image}}/>
    <View style={styles.content_container}>
      <View >
        <Text style={styles.name}>{characterName}</Text>
        <Text style={styles.status}>{characterStatus}</Text>
      </View>
    </View>
  </TouchableOpacity>
);

我的笑话测试：

 it('renders ListItem without children', () => {
const rendered = renderer.create( <ListItem  /> ).toJSON();
expect(rendered).toBeTruthy();
 })   

如果我的组件渲染良好，我如何才能通过此测试并正确测试？

Answer 1

你有几个问题。

首先在您的组件中，您正在执行以下操作

const character = this.props.character ? this.props.character : null;
const characterName = this.props.character.name ? this.props.character.name : null;

这将导致每次 this.props.character 为 null 时出现未定义的错误，因为您将无法从 character 属性中获取 name 属性。当this.props.character 为空时，您需要想出一种方法来处理响应。无论是为您的组件返回 null 还是使用默认值。选择权在你。

其次，您的测试失败了，因为您没有通过组件所依赖的字符道具，请参阅上面的第一点。您需要创建一个作为示例字符的对象并将其传递给您的ListItem。像这样，你可以填写正确的信息。

it('renders ListItem without children', () => {
  const character = { name: '<CHARACTER_NAME>', image: '<IMAGE_URI>', status: '<CHARACTER_STATUS>'};
  const rendered = renderer.create( <ListItem  character={character}/> ).toJSON();
  expect(rendered).toBeTruthy();
}) 

如果你希望你的测试在你没有通过角色道具时通过，那么你需要设置一些保护措施，以便在角色道具为空时没有任何未定义的内容。