Как проверить функции в React с Jest и Enzyme

Question

У меня есть компонент реагирования с именем Contact, который, в свою очередь, имеет дочерний компонент с именем Header. Я передаю функцию в свой компонент Header с именем handleButtonClick () .Функция вызывается в компоненте следующим образом:

<Header  handleButtonClick={this.openPopup} >

, а функция openPopup () определяется в компоненте Contact, как показано ниже:

openPopup = () => this.setState({ popupOpen: true });

Итак, я пытаюсьпротестируйте эту функцию, используя jest и Enzyme:

it("calls the `openPopup` function", () => {
        const onMockFunction = jest.fn();
        const comp = shallow(
            <SparkTheme>
                <Contact handleButtonClick={onMockFunction} />
            </SparkTheme>
        );
        comp.find(Header).simulate("change");
        expect(onMockFunction).toBeCalledTimes(1);
});

Итак, когда я запускаю этот тест, я получаю сообщение об ошибке:

Method “simulate” is only meant to be run on a single node. 0 found instead.

В чем проблема? Может кто-нибудь помочь мне сthis?

ПРИМЕЧАНИЕ: Кроме того, если у меня есть другая функция, которая принимает некоторые параметры, как показано ниже,

setValue = e => this.setState({ value: e.target.value });

, то как мне написать тестовый пример?это может быть что-то вроде:

comp.find(Header).simulate("change", event);

Я не могу проверить, как это не удалось.пожалуйста, помогите мне в этом.

РЕДАКТИРОВАТЬ 1: После выполнения comp.debug (), я получаю вывод:

<div>
        <Header contactCount={3} handleButtonClick={[Function: bound ]} buttonText="View all">
          Site Contact From HTML
        </Header>
        <ContactList name="displayContacts" data={{...}} />
        <Popup open={false} onRequestClose={[Function: bound ]}>
          <styled.h3>
            Contacts
          </styled.h3>
          <SearchBar onRequestClear={[Function: bound ]} setValue={[Function: bound ]} value="" />
          <styled.div>
            <ContactList hasLeftPadding={true} popupDisplay={true} data={{...}} />
          </styled.div>
        </Popup>
      </div>

И сообщение об ошибке я получаютеперь после записи как:

comp
            .dive()
            .find(Header)
            .prop("handleButtonClick")({ target: { value: "someValue" } });

is:

TypeError: ShallowWrapper::dive() can not be called on Host Components

Answer 1

Проблема в том, что мелкий рендеринг только на один уровень глубиной, поэтому он не может найти Header.Просто используйте console.log(comp.debug()), чтобы увидеть, что было визуализировано.Вы можете использовать dive, чтобы перейти на один уровень глубже.

Следующая проблема заключается в том, что Header не имеет прикрепленного события change, но handleButtonClick.Таким образом, чтобы вызвать это, вам нужно вызвать prop следующим образом:

comp.find(Header).prop("handleButtonClick")({target: {value: 'someValue'}})

Answer 2

Насколько я могу судить, вы видите эту ошибку, потому что вы мелкий рендеринг компонента <SparkTheme />.При поверхностном рендеринге не отображаются все дочерние элементы в дереве узлов, и поэтому имитация не находит компонент заголовка.

Мелкий рендеринг неявно побуждает вас тестировать ваши компоненты изолированно.Поэтому, если вы хотите протестировать его с помощью мелкого рендеринга, вы должны визуализировать <Header /> напрямую.Трудно дать вам больше советов, не видя код для вашего компонента заголовка.Как насчет добавления дополнительных деталей кода к вашему вопросу?