Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
197 views
in Technique[技术] by (71.8m points)

react-test-library测试库的一个问题

image.png
这里有个功能是这样的,我选中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中测试是选中的,这是怎么回事??


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...