react-native-testing-library and styled-components can't access props

user_8957964 0
Viewed 952

I have a styled-component defined like this :

export const StyledButton = styled.TouchableOpacity<IButtonProps>
  height: 46px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 46px;
  border-radius: 8px;
  background: ${EAppColors.BLACK};
  opacity: ${props => (props.disabled ? 0.6 : 1)};
;

interface IButtonProps {
  readonly children: React.ReactNode;
  readonly onPress: () => any;
  readonly style?: StyleProp<ViewStyle>;
  readonly testID?: string;
  readonly disabled?: boolean;
}

const Button: React.FC<IButtonProps> = ({
  children,
  style,
  onPress,
  disabled = false,
}) => {
  return (
    <StyledButton
      testID={'button.simple'}
      onPress={onPress}
      style={style}
      disabled={disabled}>
      {children}
    </StyledButton>
  );
};

and I would like with react-native-testing-library to access the disabled props. There is my test :

 const { getByTestId } = render(
      <Button disabled={false} onPress={onPressMock}>
        <Text>Title</Text>
      </Button>,
    );

but when I log in my test suite I only have this:

  console.log(getByTestId('button.simple').props);

And the result of the console.log in my terminal :

  {
    accessible: true,
    style: {
      height: 46,
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: 8,
      backgroundColor: '#000000',
      opacity: 1
    },
    testID: 'button.simple'

How can I access to the props passed?

react-native styled-components react-testing-library jestjs javascript
1 Answers

I'm not sure you really want to access the prop of your component. Checking if the correct prop has been passed or not, is more or less equivalent to testing that react-native does its job correctly (which is not what you want to test ! But maybe you have a good reason to...).

Correct me if I'm wrong, but I assume what you want to test is if the opacity of your StyledButton is indeed 0.6 when it's disabled? If yes, I highly recommend the use of testing/library/jest-native and more particularly the toHaveStyle method :

it('sets the correct opacity if disabled', () => {
  const { getByTestId } = render(
    <Button disabled={true} onPress={onPressMock}>
      <Text>Title</Text>
    </Button>
  );

  const button = getByTestId('button.simple');

  expect(button).toHaveStyle({ opacity: 0.6 });
});
user_135444890
Related