0

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

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呢？

在此先感谢您的时间！

4

1 回答 1

0

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

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

于 2021-01-13T05:27:03.340 回答