Неполадка при тестировании методом onClick с использованием Mocha Chai и Enzyme

Question

У меня проблемы с модульным тестированием с использованием мокко, чая и энзима для следующего.Я не могу понять, как объединить методы модульного тестирования в компонентах и ​​как методы модульного тестирования onClick будут вызывать эти методы.Вот что я пытаюсь выполнить модульное тестирование:

<Link to="/create-new-template-results" onClick={this.checkLink}>
    <Button
        buttonname="Next_button"
        variant="primary"
        label="Save"
        onClickMethod={() => this.submitTemplateCreation()}
        disabled={!this.disabledButtonCheck()}
    />
</Link>

.

Header: '',
Cell: value => {
    return (
        <div>
            <img
                height={34}
                src="https://content.usaa.com/mcontent/static_assets/Media/icon-trash.svg"
                onClick={() => this.removeAttribute(value)}
            />
        </div>
    );
}

.

removeAttribute = value => {
    this.props.change('templateAttributeForm', value.original.name, '');
    this.props.removeAttributeItem(value.index);
};

submitTemplateCreation() {
    let profLvlData = Object.values(this.props.templateAttributeFormData);
    let attrData = Object.keys(this.props.templateAttributeFormData);
    let attributeProfLvl = attributeProfLvlUtil(attrData, profLvlData);
    let templateCreationJSON = templateCreationPOSTFilter(attributeProfLvl, this.props.templateFormData);
    this.props.submitTemplateCreation(templateCreationJSON);
}

Answer 1

Chai предоставляет несколько хороших инструментов для тестирования вещей в точности так, как вы говорите.

Вы захотите как-то визуализировать свой компонент в виртуальном DOM, используя функции «мелкого» или «монтирования» фермента.

Как только вы это сделаете, вы можете получить доступ к компоненту с помощью .find и «смоделировать» событие, используя .simulate, вот так.

wrapper.find('Button').at(0).simulate('click');

Это найдет все 'Компоненты кнопки в вашей обертке, возьмите первый и имитируйте щелчок.Оттуда вы можете использовать функцию ожидаем () в сочетании с любым из способов, которые предоставляет Чай, чтобы проверить состояние компонента, чтобы проверить, что ваша кнопка сделала то, что должна была.

Поскольку кажется, что вы особенно заинтересованы в вызове самой функции onClick, я добавлю, что вы можете специально проверить, вызывается ли функция, выполнив следующие действия с Chai.

expect(MyComponent.prototype.myOnClickFunction).to.have.property('callCount', 1);