javascript - 如何在 React with Jest(无 enzyme )中测试功能组件的状态

Question

大家好，我如何从 useState Hook 测试功能组件的状态？
这是我的组件:

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;

当我使用 selected props 值渲染组件为 false 以及使用 selected props 渲染组件为 true 时，如何检查状态值？
以及如何测试按钮上的单击事件是否触发 setSelected()？顺便说一句，我们不能使用 enzyme

Answer 1

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