这里有个功能是这样的,我选中select all ,下面其他的全都会选中,但是我在用 react-test-library的时候,代码是这样的
react的组件代码是这样的
<div className='MultiCheck'>
<div data-testid={'label'} className={'label'}>{label} </div>
<div data-testid={'select all'}>select all
<input
id={'selectAll'}
type="checkbox"
checked={checkAll}
onChange={()=>{changeSelectAll()}}
data-testid={'select All ckeckbox'}/>
</div>
<div className="optionList">
{multiColumns.map((col,colIdx)=>{
return (<div key={colIdx} className="contentCol">
{col.map((row,rowIdx)=>{
return (<div key={rowIdx} className="contentRow" data-testid="select-item">
<input onChange={()=>{handleClickItem(row.value)}}
id={row.label} type="checkbox" checked={values.indexOf(row.value)!=-1}
data-testid="select-item-checkbox"
/>
<label htmlFor={row.value}>{row.label}</label>
</div>)
})}
</div>)
})}
</div>
</div>
it.only('clicked select all checkbox', () => {
const {selectedValuefunc,wrapper} = startUp();
const selectAll = wrapper.getByTestId("select All ckeckbox")
fireEvent.click(selectAll)
expect(selectedValuefunc).toBeCalledTimes(1)
expect(selectAll).toHaveProperty("checked",true)
const selectItems = wrapper.getAllByTestId("select-item-checkbox")
//selectItems 为什么没有选中
});
用react-test-library测试的是时候,点全部选中,其他的checkbox是没有选中的,但实际在UI中测试是选中的,这是怎么回事??
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…