CODEWITHSUNDEEP
react-nativereact-native-popup-menu
usafder
usafder

Reputation: 816

How to unit test behavior in react-native-popup-menu

Suppose I have the code below:

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

Now how to unit test (using enzyme) whether the onSelect of first MenuOption calls funcOne and the onSelect of the second MenuOption calls funcTwo?

The testing example in the doc wasn't very helpful as there's no example related to checking the behavior.

Upvotes: 2

Views: 660

Answers (1)

Chandini
Chandini

Reputation: 550

You can test it depending on what exactly are you doing in the funcOne() and funcTwo() functions. Just for an example lets say that you are changing the state of message, then you can test the state value whether its changed or not.

Initialised in the component 

this.state = {
  message: ""
}

and you have changed it in funcOne 

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

As you have 2 MenuOption components, you could give them testIDs. 

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

Now you can test like this.

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

Similarly MenuOption2 can also be tested.

Upvotes: 0

Related Questions