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

这将在包装器中找到所有的“按钮”组件，采用第一个组件，并模拟单击。在这里，您可以将Expect（）与Chai提供的用于检查组件状态的任何方式结合起来，以测试您的按钮是否按预期进行了操作。

由于您似乎对onClick函数本身的调用特别感兴趣，因此我要补充一点，您可以通过对Chai进行以下操作来专门检查是否调用了函数。

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

使用Mocha Chai和Enzyme的单元测试onClick方法存在问题

1 个答案: