| ReactNative |-有条件的渲染？：使用Jest && Enzyme

Question

下午好，我有一个结构像这样的组件文件：

  class Component ...

      render(){
           const {array} = this.props

           {!array.includes(value) ?
                (<View ...props
                    id="myComponent"/>
                      ....
                 </View>)  :

                (<View ...props
                   id="myOtherComponent"/>
                      ....
                </View>)
            }
        }

在我的测试文件中，我正在做类似的事情：

describe('Testing Component', () => {
        test('conditional rendering', () => {
        const wrapper = shallow(<Component array={[value]}/>);
        expect(wrapper.find(n => n.prop('id') === "myOtherComponent").exists(true))
    });
});

但是，即使我修改了为数组发送的props，它也总是返回true ……用于检查嵌套组件是否已实际验证和呈现的关键字是什么？

Answer 1

我认为错误在于您的expect参数。

1. 我将使用findWhere函数代替find ;
2. 在这种情况下， exists方法不应接收参数，因为它仅接收酶的选择器而不是布尔值（您可以在此处了解更多信息）；
3. 将toBeTruthy调用添加到expect行。

这是一种与您类似的情况，我们已经对其进行了测试，并且效果很好：

it('tests name', () => {
  const mockComponent = shallow(<Component {...props} />);
  const textNode = mockComponent.findWhere(n => n.text() === props.name);
  expect(textNode.exists()).toBeTruthy();
});

因此，您的测试最终将如下所示：

describe('Testing Component', () => {
        test('conditional rendering', () => {
        const wrapper = shallow(<Component array={[value]}/>);
        const node = wrapper.findWhere(n => n.prop('id') === 'myOtherComponent');
        expect(node.exists()).toBeTruthy();
    });
});