TouchableOpacity 不显示 disabled 和 activeOpacity 道具

问题描述

我正在尝试测试这个简单的按钮：

import React,{ FC,ReactNode } from 'react';
import { TouchableOpacity,GestureResponderEvent,ViewStyle } from 'react-native';

type Props = {
  style: ViewStyle;
  onPress: (event: GestureResponderEvent) => void;
  disabled?: boolean;
  activeOpacity?: number;
  children: ReactNode;
};

export const Button: FC<Props> = ({
  style,onPress,disabled,activeOpacity,children
}) => {
  return (
    <TouchableOpacity
      activeOpacity={ activeOpacity }
      onPress={ onPress }
      style={ style }
      disabled={ disabled }
      testID={ 'button' }
    >
      { children }
    </TouchableOpacity>
  );
};

我使用这个测试文件，我只是用一些道具渲染我的按钮：

import React from 'react';
import { Text,StyleSheet } from 'react-native';
import { render } from '@testing-library/react-native';
import { ReactTestInstance } from 'react-test-renderer';
import { Button } from '../../../src/components/Button';

const styles = StyleSheet.create({
  button: {
    height: 50
  }
});

const onPressMock = jest.fn();

describe('FilterForm',() => {
  it('should render Button with default arguments',() => {
    const { queryByText,debug } = render(
      <Button style={ styles.button } onPress={ onPressMock } disabled activeOpacity={ 0.3 }>
        <Text>{ 'Dummy Test Text' }</Text>
      </Button>
    );

    debug();

    // Not important - just in case you are curIoUs //
    let buttonText = queryByText('Dummy Test Text');
    expect(buttonText).not.toBeNull();
    buttonText = buttonText as ReactTestInstance;
    expect(buttonText.parent?.parent?.props.testID).toEqual('button');
    expect(buttonText.parent?.parent?.props.activeOpacity).toEqual(0.3);
    expect(buttonText.parent?.parent?.props.disabled).toEqual(true);
  });
});

问题是我返回了这棵树，其中没有 disabled 或 activeOpacity：

<View
  accessible={true}
  focusable={true}
  onClick={[Function onClick]}
  onResponderGrant={[Function onResponderGrant]}
  onResponderMove={[Function onResponderMove]}
  onResponderRelease={[Function onResponderRelease]}
  onResponderTerminate={[Function onResponderTerminate]}
  onResponderTerminationRequest={[Function onResponderTerminationRequest]}
  onStartShouldSetResponder={[Function onStartShouldSetResponder]}
  style={
    Object {
      "height": 50,"opacity": 1,}
  }
  testID="button"
>
  <Text>
    Dummy Test Text
  </Text>
</View>

因为我在上面的测试文件中的断言失败了。那么如何测试 TouchableOpacity 的 props？

提前感谢您的时间！

解决方法

我可以使用 disabled 调用 fireEvent(button,'press') 道具。禁用的按钮不会调用处理程序，因此我可以使用 expect(handlerMock).not.toBeCalled() 对其进行断言。

至于activeOpacity，我想故事书应该用于视觉测试。