TouchableOpacity 不显示 disabled 和 activeOpacity 道具

Question

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

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的道具呢？

提前感谢您的宝贵时间！

Answer 1

我可以使用 fireEvent(button, 'press') 调用 disabled 属性。禁用的按钮不会调用处理程序，所以我可以用 expect(handlerMock).not.toBeCalled().

断言它

至于activeOpacity，我想storybook应该用于视觉测试。

TouchableOpacity 不显示 disabled 和 activeOpacity 道具

TouchableOpacity does not show disabled and activeOpacity props

react-native

react-native-testing-library

native-testing-library