Question

大家好，我该如何从useState挂钩中测试功能组件的状态？这是我的组件：

const Container = styled.div
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: ${props => props.hasSubtitle ? 'flex-start' : 'center'};
    opacity: ${props => props.disabled ? 0.5 : 1.0};
    ${props => props.style}

const Button = styled.button
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;

const TextContainer = styled.div
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-left: 12px;

const CheckBox = props => {
    const [selected, setSelected] = useState(false);

    useEffect(() => {
        setSelected(props.selected);
    }, [props.selected]);

    return (
        <Container data-testid={'checkbox'} style={props.style} hasSubtitle={props.subtitle}>
            <Button
                data-testid={'checkBtn'}
                onClick={() => {
                    if(!props.disabled){
                        setSelected(!selected);
                        if(props.onChange) props.onChange(!selected);
                    }
                }}
            >
                {selected ? <CheckBoxOn/> : <CheckBoxOff/>}
            </Button>
            <TextContainer>
                <Text style={{fontSize: 16}}>
                    {props.title}
                </Text>
                {props.subtitle && <Text style={{fontSize: 12}}>{props.subtitle}</Text>}
            </TextContainer>
        </Container>
    );
};

export default CheckBox;

当我将选择的props值渲染为false时，以及当将选择的props渲染为true时，如何检查状态的值？以及如何测试按钮上的click事件是否触发setSelected（）？顺便说一句，我们无法使用酶

Answer 1

最近has been considered a bad practice检查测试中的状态。人们通常建议检查状态更改的后果：在您的情况下，您可以检查CheckBoxOn的存在。

如何在带有Jest的React中测试功能组件的状态（无酶）

1 个答案: