e2e testing using testID and customStyles

[mikbry]

This component is not designed for e2e testing, see #155.
But i found a workaround using customStyles. In fact customStyles are more customProps for sub-components.
For MenuTrigger:

<MenuTrigger customStyles={{ triggerTouchable: { testID: 'menu-trigger' } }} />

For MenuOption:

<MenuOption customStyles={{ optionTouchable: { testID: 'option-1' } }} />

Tested using Detox on Android emulator

[sjmdocto]

This works for MenuTrigger, but no testID is showing up for MenuOption for me. I'm using Jest and React Native.

[mikbry]

For me it is working ok testing 4/5 different MenuOptions. And I checked back at MenuOptions source code:

<Touchable
          onPress={() => this._onSelect()}
          {...defaultTouchableProps}
          {...customStyles.optionTouchable}
        >
          {rendered}
</Touchable>

So optionTouchable is the right parameter. Are you testing on iOS or React Web, if so Touchable is a different component TouchableHighlight, I didn't test. Also if MenuOption is disable, the parameter can't be changed to optionWrapper as it is using style instead if props.

[sodik82]

This component is not designed for e2e testing, see #155.

PRs are welcomed :) supporting testID makes sense to me

[mikbry]

I work on the e2e PR ;-)
Regarding customStyles not implemented in Touchable as style={customStyles.xxxTouchable} but directly as props is it a bug or ?

[sodik82]

thanks @mikbry for PR.

Regarding the question (if I get it right), spreading optionTouchable directly (without style=) was intention so that you can change non-style properties like e.g. underlayColor (see api ). You can always use `optionTouchable={style: {....}} to set the styles.

[mikbry]

Yep but I think it should be named customProps instead of customStyle ?

[sodik82]

well... most of those are styles, but this is "exception" as you need props to style touchable....

…

On Fri, Dec 11, 2020 at 2:26 PM Mik ***@***.***> wrote: Yep but I think it should be named customProps instead of customStyle ? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#197 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABOZEI2KIXAGI7U3GKKMBP3SUIMXVANCNFSM4UTVUPOA> .

[sodik82]

but yes, it is suboptimal name.

[sjmdocto]

For me it is working ok testing 4/5 different MenuOptions. And I checked back at MenuOptions source code:

<Touchable
          onPress={() => this._onSelect()}
          {...defaultTouchableProps}
          {...customStyles.optionTouchable}
        >
          {rendered}
</Touchable>

So optionTouchable is the right parameter. Are you testing on iOS or React Web, if so Touchable is a different component TouchableHighlight, I didn't test. Also if MenuOption is disable, the parameter can't be changed to optionWrapper as it is using style instead if props.

The popup menu works fine on iOS/Android simulators, but I'm trying to use Jest to run tests. I'm trying to use React Native Testing Library such that I can find a MenuOption by it's testID, click on that option, and then test my own code. But fireEvent.press() isn't finding the MenuOption's testID. And when I use Jest's snapshot feature, I can find the testID of MenuTrigger, but I can't find any MenuOption's testID's.

I copied the code that you wrote:
<MenuOption customStyles={{ optionTouchable: { testID: 'option-1' } }} />

[mikbry]

@sjmdocto you should test latest version 0.15.10. I added support for testID in MenuOption and MenuTrigger

[CallumHemsley]

For me it is working ok testing 4/5 different MenuOptions. And I checked back at MenuOptions source code:

<Touchable
          onPress={() => this._onSelect()}
          {...defaultTouchableProps}
          {...customStyles.optionTouchable}
        >
          {rendered}
</Touchable>

So optionTouchable is the right parameter. Are you testing on iOS or React Web, if so Touchable is a different component TouchableHighlight, I didn't test. Also if MenuOption is disable, the parameter can't be changed to optionWrapper as it is using style instead if props.

The popup menu works fine on iOS/Android simulators, but I'm trying to use Jest to run tests. I'm trying to use React Native Testing Library such that I can find a MenuOption by it's testID, click on that option, and then test my own code. But fireEvent.press() isn't finding the MenuOption's testID. And when I use Jest's snapshot feature, I can find the testID of MenuTrigger, but I can't find any MenuOption's testID's.

I copied the code that you wrote: <MenuOption customStyles={{ optionTouchable: { testID: 'option-1' } }} />

Hey @sjmdocto did you find a solution for this? Exact same use case.

Should also be noted I'm on version 0.15.12 @mikbry - looks like fireEvent.press is causing the menu options to show in the DOM.

[charlestbell]

Has anyone gotten Jest fireEvent.press() working?

[plambir93kek]

No MenuOption in snapshots, also no elements found by testID of menu option.

const menuOptionStyle = useMemo(
    (): MenuOptionCustomStyle => ({
      optionWrapper: {
        ...style.option,
        ...optionStyle
      },
      OptionTouchableComponent: TouchableOpacity,
      optionTouchable: { testID: 'dropdown-option' }
    }),
    [optionStyle]
  );

  return (
    <MenuOption
      customStyles={menuOptionStyle}
      disabled={isDisabled}
      value={value}
      onSelect={handleSelect}>
      {icon && <View style={[style.icon, iconStyle]}>{icon}</View>}
      <AppText style={titleStyle}>{title}</AppText>
    </MenuOption>
  );

[shail-spreadd]

still not working for me using RNTL fireevent.press is not opening my menu @sodik82