React Native条件渲染测试异常：Jest&Enzyme断言恒为true

看起来你遇到的问题主要出在断言写法的错误，以及可能的选择器使用细节上。咱们一步步来梳理正确的验证方法：

1. 先修正断言的写法错误 #

你当前的断言代码expect(wrapper.find(n => n.prop('id') === "myOtherComponent").exists(true))有问题——exists()方法不需要传入参数，它本身会返回一个布尔值。正确的写法应该是：

expect(wrapper.find(n => n.prop('id') === "myOtherComponent").exists()).toBe(true);

或者用更简洁的toBeTruthy()，不过toBe(true)的语义会更明确。

2. 确保变量一致性 #

要注意测试代码里的value和组件内部使用的value必须是同一个值。如果组件里的value是props传入的（比如你代码里没写全，假设是this.props.value），测试时一定要正确传入这个值，否则条件判断逻辑会完全不符合预期。

3. 优化组件选择器（推荐方案） #

用id做测试选择器虽然可行，但在React Native场景下，id属性的处理可能和Web端有差异，更推荐使用**data-testid**作为测试专用标识——既不会和业务逻辑的id冲突，也能让测试代码的意图更清晰。

修改你的组件代码：

class Component extends React.Component {
  render(){ 
    const { array, value } = this.props; // 假设value是props传入的
    return (
      <>
        {!array.includes(value) ? (
          <View {...this.props} data-testid="myComponent" />
        ) : (
          <View {...this.props} data-testid="myOtherComponent" />
        )}
      </>
    )
  }
}

然后编写更严谨的测试用例：

describe('Testing Component', () => { 
  const testValue = 'demo-value'; // 定义测试用的固定值

  test('renders myOtherComponent when array includes target value', () => { 
    const wrapper = shallow(<Component array={[testValue]} value={testValue}/>); 
    // 断言目标组件存在
    expect(wrapper.find('[data-testid="myOtherComponent"]').exists()).toBe(true);
    // 同时断言另一个组件不存在，让测试逻辑更严谨
    expect(wrapper.find('[data-testid="myComponent"]').exists()).toBe(false);
  }); 

  test('renders myComponent when array does NOT include target value', () => { 
    const wrapper = shallow(<Component array={['unrelated-value']} value={testValue}/>); 
    expect(wrapper.find('[data-testid="myComponent"]').exists()).toBe(true);
    expect(wrapper.find('[data-testid="myOtherComponent"]').exists()).toBe(false);
  }); 
});

额外说明 #

如果你使用的是Enzyme的shallow渲染，它只会渲染当前组件的第一层DOM，你的条件渲染直接返回View组件，所以完全可以被shallow捕获到，不需要用mount。只有当组件嵌套了更深层级的子组件需要测试时，才考虑使用mount。

内容的提问来源于stack exchange，提问作者Mayoul