| 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))
    });
});

Нодаже если я изменяю реквизиты, отправленные для массива, он всегда возвращает мне 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();
    });
});