react-native-testing-library和styled-components无法访问属性

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- to library来访问被禁用的道具。这是我的测试：

 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'

我怎样才能获得通过的道具？

Answer 1

我不确定您是否真的想访问组件的属性。检查是否通过了正确的属性，或多或少等同于测试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 });
});