如何解决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
,我想故事书应该用于视觉测试。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。