javascript - react-native-testing-library 和 styled-components 无法访问 Prop

Question

我有一个这样定义的样式组件:

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>
  );
};

我想用 react-native-testing-library 来访问禁用的 Prop 。这是我的测试:

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

但是当我登录我的测试套件时，我只有这个:

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

以及我终端中 console.log 的结果:

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

如何访问传递的 Prop ？

Answer 1

我不确定您真的想要访问组件的 prop。检查是否传递了正确的 prop，或多或少等同于测试 react-native 是否正确地完成了它的工作(这不是你想要测试的!但也许你有一个很好的理由到...)。

如果我错了请纠正我，但我假设你想要测试的是你的 StyledButton 的不透明度在 disabled< 时是否确实是 0.6/？如果是，我强烈建议使用 testing/library/jest-native尤其是 toHaveStyle方法:

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 });
});