reactjs - 用玩笑和酶测试按钮
问题描述
在我的 React-Native 应用程序中,我有一个按钮组件,使用如下。
// primary button (default button)
<Button
text='Continue'
onPress={() => this.onContinue()}
/>
// secondary button
<Button
type='Secondary'
text='Continue'
onPress={() => this.onContinue()}
/>
// disabled button
<Button
text='Continue'
disabled={true}
onPress={() => this.onContinue()}
/>
我为这些编写了以下测试。
import { shallow } from 'enzyme';
import React from 'react';
import Button from '../../src/components/button';
describe('Button', () => {
it('expect to render a primary button component', () => {
const mockLabel = 'Test Button';
const wrapper = shallow(<Button label={mockLabel} />);
expect(wrapper).toMatchSnapshot('primary button snapshot');
});
it('expect to render a secondary button component', () => {
const type = Button.Types.SECONDARY;
const mockLabel = 'Test Button';
const wrapper = shallow(<Button type={type} label={mockLabel} />);
expect(wrapper).toMatchSnapshot('secondary button snapshot');
});
it('expect to render a disabled button component', () => {
const disabled = true;
const mockLabel = 'Test Button';
const wrapper = shallow(<Button label={mockLabel} disabled={disabled} />);
expect(wrapper).toMatchSnapshot();
});
});
这是编写测试的正确方法吗?虽然它可以正常工作,但是这些测试是否正确涵盖了这些场景?
这是我的按钮组件。如何检查类型是主要还是次要?如果按钮禁用工作正常?onPress() 是否按预期工作?任何帮助将不胜感激。
import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { TextLabel } from '../components';
import colors from '../res/colors';
class Button extends Component<IProps> {
static defaultProps: IProps;
static Types = {
PRIMARY: 'primary',
SECONDARY: 'secondary',
};
state = {
pressed: false,
};
handlePressIn = () => {
this.setState({ pressed: true });
}
handlePressOut = () => {
this.setState({ pressed: false });
}
buttonStyles = () => {
const { pressed } = this.state;
const { type, disabled } = this.props;
if (type === Button.Types.PRIMARY) {
if (disabled) return styles.primaryButtonDisabled;
if (!pressed) return styles.primaryButtonDefault;
if (pressed) return styles.primaryButtonPressed;
}
if (type === Button.Types.SECONDARY) {
if (disabled) return styles.secondaryButtonDisabled;
if (!pressed) return styles.secondaryButtonDefault;
if (pressed) return styles.secondaryButtonPressed;
}
}
textStyles = () => {
const { pressed } = this.state;
const { type, disabled } = this.props;
if (type === Button.Types.PRIMARY) return styles.primaryText;
if (type === Button.Types.SECONDARY) {
if (disabled) return styles.secondaryTextDisabled;
if (!pressed) return styles.secondaryTextDefault;
if (pressed) return styles.secondaryTextPressed;
}
}
render() {
const {
disabled,
text,
buttonStyle,
onPress,
} = this.props;
return (
<TouchableOpacity
onPress={() => onPress()}
activeOpacity={1}
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
disabled={disabled}
style={[styles.button, this.buttonStyles(), buttonStyle]}
>
<TextLabel
type={TextLabel.Types.BUTTON_LBL}
style={[styles.text, this.textStyles()]}
label={text}
/>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
button: {
borderRadius: 4,
borderWidth: 1,
justifyContent: 'center',
// position: 'absolute',
height: 48,
width: '100%',
marginTop: 20,
marginBottom: 20,
},
primaryButtonDefault: {
backgroundColor: colors.primary,
borderColor: colors.primary,
},
primaryButtonPressed: {
backgroundColor: colors.darkRed,
borderColor: colors.darkRed,
},
primaryButtonDisabled: {
backgroundColor: colors.gray,
borderColor: colors.gray,
},
secondaryButtonDefault: {
borderColor: colors.primary,
},
secondaryButtonPressed: {
borderColor: colors.darkRed,
},
secondaryButtonDisabled: {
borderColor: colors.gray,
},
text: {
textAlign: 'center',
textTransform: 'uppercase',
},
primaryText: {
color: colors.white,
},
secondaryTextDefault: {
color: colors.primary,
},
secondaryTextPressed: {
color: colors.darkRed,
},
secondaryTextDisabled: {
color: colors.gray,
},
});
export interface IProps {
disabled?: boolean;
text: string;
type?: string;
buttonStyle?: object;
onPress: Function;
}
Button.defaultProps = {
disabled: false,
text: '',
type: Button.Types.PRIMARY,
buttonStyle: {},
onPress: () => {},
};
export default Button;
解决方案
快照测试不同于单元测试。
快照测试有助于了解给定组件的渲染输出差异。尤其是在代码审查练习期间或浏览项目的源代码控制历史时。但是,它们不保证给定的行为。
你写的是快照测试,用单元测试来补充它们会很棒。在您的情况下,您需要测试Button
组件的内部工作原理:
给定一组参数(例如您的 3 个场景),是呈现预期代码的render()
功能。Button
由于您尚未发布Button
组件的代码,因此我无法帮助您编写这些测试。
推荐阅读
- mysql - MySQL 每天使用情况
- javascript - 使用事件监听器在 Javascript 中提交表单不会触发获取请求
- python - 如何根据其他 3 个列中的项目绘制两个 pandas 列?
- performance - 使用 IIS Express 监视性能计数器
- modelica - 如何在 Modelica 中存储和插入多维、可变大小的数组?
- javascript - 处理 JSON
- gradle - 打包 tornadofx 应用程序时出现不受支持的 major.minor 版本错误
- karate - 验证来自具有多个数据的 xpath 位置的数据
- c# - 如何拆分 Grid 以仅使某些元素可滚动?
- c++ - 'for循环'在3次迭代后退出