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

Question

我有一个带有一些道具的组件，但是当我想测试他是否渲染时，测试失败了，我有以下错误消息："类型错误：无法读取未定义的属性'名称'

这是我的组件：

  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 prop 获取 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();
}) 

如果您希望测试在未通过角色道具时

通过，则需要设置一些保护措施，以便在角色道具为空时不会未定义任何内容。