如何在单元测试中使用jest和酶

Question

我试图在用户未经过身份验证时测试应显示登录和订阅按钮的组件，但在用户通过身份验证时应显示注销按钮。

进行测试时，我应该如何参考这些按钮？

我发现的所有例子都是人们做的事情：

expect(wrapper.find(Button).lenght).toBe(1); // or whatever

但这显然不适合我的情况，因为我总是至少有一个按钮，它们都是相同的，除了它的文字和动作。

所以我认为我需要一些方法来引用这些按钮，所以我可以传递一个经过身份验证的道具并检查是否正好渲染了注销按钮。

这样做的最佳方法是什么？

Answer 1

选择元素的选项可以在Selector的文档中看到。

在这种情况下，您可能希望添加css类并使用类语法，或者如果您的按钮使用input元素将文本设置为属性，则可能使用属性语法。

Answer 2

您需要确定每个按钮的区别。首先，找到按钮：

const button = wrapper.find(Button)

然后expect()关于按钮的某些特征。例如，

expect(button.props().children).toEqual('Subscribe')

或

expect(button.props().children).toEqual('Logout')

Answer 3

只需使用过滤器：

wrraper.find(Button).filter({className:'any'})

wrraper.find(Button).filter({label:'any'})

...等