Могу ли я использовать идентификаторы в React, чтобы разрешить сопоставление отдельных элементов с ферментами containsMatchingElement? - PullRequest
Новая
       7

Могу ли я использовать идентификаторы в React, чтобы разрешить сопоставление отдельных элементов с ферментами containsMatchingElement?

0 голосов
/ 21 января 2020

Как вы ссылаетесь на элемент React, используя ферменты containsMatchingElement, если элемент React встречается несколько раз? Должен ли каждый элемент иметь идентификатор, на который ссылается взамен?

Для примера:

У меня есть простой компонент для рендеринга трех «животных», каждый внутри строки. Компонент имеет одну опору show_mouse, которая будет скрывать и показывать Row, содержащую мышь. Модульный тест containsMatchingElement будет соответствовать всем Row компонентам, а не только одному, который меня интересует. Должен ли я добавлять уникальный идентификатор в каждую строку, например, id="row-mouse, на который я могу ссылаться в Enzyme? Я просто не уверен, что это способ «Реакции»

Animal.jsx 


type PropTypes = {
    show_mouse: boolean,
};

export default function Animal(props: PropTypes) {

    return (
        <>
            <Row>
                <div>Cat</div>
            </Row>
            { props.show_mouse ? (
                <Row>
                    <div>Mouse</div>
                </Row>
                ) : "" }
            <Row>
                <div>Dog</div>
            </Row>

        </>
    );
}


OptionExercisePeriods.defaultProps = {
    show_mouse: '',
};

Animal.jest. js

import { mount } from 'enzyme';

import Animal from '../Animal';


describe('Animal component test', () => {

    test("Mouse hides and shows", () => {
        const wrapper = mount(<Animal show_mouse={true} />);

        expect(
            wrapper.containsMatchingElement(
                <Row>,
            ),
        ).toBeTruthy();

        wrapper.setProps({show_mouse: false});

        expect(
            wrapper.containsMatchingElement(
                <Row>,
            ),
        ).toBeFalsy();

    });

});

Ответы [ 2 ]

0 голосов
/ 22 января 2020

Я закончил проверку на существование с использованием идентификатора.

expect(wrapper.exists('#myIdName')).toBe(true);

Опираясь на @ andreasonny83 ответ.

0 голосов
/ 22 января 2020

Вы, конечно, можете использовать «id» для уникальных идентификаторов. В противном случае вы все равно можете поместить className в элемент Row и сопоставить его в своих тестах. Оба являются действительными решениями.

В своем тесте вы можете просто найти элемент с помощью селектора css и убедиться, что он отрендерен, выполнив: 

expect(wrapper.find('Row.myClassName').exists()).toBe(true);

Или используя Id с 

expect(wrapper.find('Row#myIdName').exists()).toBe(true);

Кроме того, если вы хотите убедиться, что вы визуализируете правильный дочерний блок внутри, вы также можете использовать текстовый помощник, например: 

expect(wrapper.find('Row').text()).toBe("Cat");
...