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

Question

假设我有以下代码：

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

现在如何单元测试（使用酶）是否第onSelect一次MenuOption调用funcOne和onSelect第二次MenuOption调用funcTwo？

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

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。