Question

假设我有以下代码：

<Menu>
  <MenuTrigger text='Select action' />
  <MenuOptions>
    <MenuOption onSelect={() => funcOne()} text='Call funcOne' />
    <MenuOption onSelect={() => funcTwo()} text='Call funcTwo' />
  </MenuOptions>
</Menu>

现在如何（使用酶）对第一个onSelect的{{1}}调用MenuOption和第二个funcOne的{{1}}调用{{ 1}}？

文档中的测试示例并不是很有帮助，因为没有与检查行为相关的示例。

Answer 1

您可以根据在funcOne（）和funcTwo（）函数中到底要执行的操作来对其进行测试。仅举一个例子，假设您正在更改消息的状态，然后可以测试状态值是否更改。

在组件中初始化

this.state = {
  message: ""
}

您已经在funcOne中进行了更改

funcOne() {
 .....
 this.setState({message: "funcOne"});
 ... 
}

由于您有2个MenuOption组件，因此可以给它们提供testID。

<Menu>
  <MenuTrigger text='Select action' />
  <MenuOptions>
    <MenuOption testID={"MenuOption1"} onSelect={() => funcOne()} text='Call funcOne' />
    <MenuOption testID={"MenuOption2"} onSelect={() => funcTwo()} text='Call funcTwo' />
  </MenuOptions>
</Menu>

现在您可以像这样进行测试了。

const wrapper = shallow(<Menu/>);
expect(wrapper.state().message).toEqual("");
wrapper.find('MenuOption[testID="MenuOption1"]').simulate("Select");
expect(wrapper.state().message).toEqual("funcOne");

类似地，也可以测试MenuOption2。

如何在react-native-popup-menu中对行为进行单元测试

1 个答案: