Javascript 如何使用Jest和Ezyme测试样式化组件的属性

我有一个带样式的组件，它用一些样式包装了一个输入复选框元素。在我的应用程序中，默认情况下可能已选中此复选框。这是一些组件代码：

const InputCheckbox = styled.input.attrs((props) => ({
    id: props.id,
    type: 'checkbox',
    checked: props.checked
}))`
    visibility: hidden;

    &:checked + label {
        background-color: ${(props) => props.theme.mainColor};
        border-color: ${(props) => props.theme.mainColor};

        &:after {
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
        }
    }
`;


function Checkbox(props) {
    return (
        <CheckboxContainer>
            <InputCheckbox
                id={props.id}
                checked={props.checked}
                onChange={(event) => {
                    props.onChange(event.target.checked);
                }}
            />
            <CheckboxLabel id={props.id} />
        </CheckboxContainer>
    );
}

constinputcheckbox=styled.input.attrs（（props）=>({
id:props.id，
键入：“复选框”，
检查：道具检查
}))`
可见性：隐藏；
&：选中+标签{
背景色：${（props）=>props.theme.mainColor}；
边框颜色：${（props）=>props.theme.mainColor}；
&：之后{
左边框：2倍实心#fff；
边框底部：2倍实心#fff；
}
}
`;
功能复选框（道具）{
返回(
{
props.onChange（event.target.checked）；
}}
/>
);
}

我正在使用Jest和Ezyme进行测试，但是我找不到任何关于如何深入到Ezyme浅包装器中检查我的InputCheckbox中的输入是否将checked属性设置为true的信息。例如：

describe('Checkbox', () => {
    const mockProps = {
        id: 'settings-user',
        checked: true,
        onComplete: (id) => jest.fn(id)
    };

    const component = shallow(<Checkbox {...mockProps}/>);

    describe('on initialization', () => {
        it('Input should be checked', () => {
            const inputCheckbox = component.find('InputCheckbox');
            expect(inputCheckbox.props().checked).toBe(true);
        });
    });
});

description（'Checkbox'，（）=>{
常量mockProps={
id:“设置用户”，
核对：对，
onComplete：（id）=>jest.fn（id）
};
常量分量=浅（）；
描述（'初始化时'，（）=>{
它（'应检查输入'，（）=>{
const inputCheckbox=component.find（'inputCheckbox'）；
expect（inputCheckbox.props（）.checked）.toBe（true）；
});
});
});

此测试失败，因为

.find（）

找不到任何节点

您需要设置显示名称以供查找：

InputCheckbox.displayName='InputCheckbox'




在那次尝试之后
component.find（'InputCheckbox'）

为了使用更方便

还可以尝试将find与组件构造函数一起使用

import InputCheckbox from 'path-to-component';

...

const inputCheckbox = component.find(InputCheckbox);

如果您需要访问子组件，可能需要使用“mount” 而不是“浅”

---

谢谢，这正是我所期望的。为了避免使用

mount

，我只是检查样式化组件是否具有道具。