Question

我有一个名为“ Grid”的组件，具有这样的渲染方法-

render(){
  this.createTable();

  return (
    <div
      style={{display:'flex',justifyContent:'center',flexDirection:'column'}}
    >
      <input
        id='gridFilterText'
        placeholder="filter text here....."
        style={{width:'50%',height:'25px',borderRadius:'4px'}}
        onChange={this.onType} 
        value={this.state.value}
      ></input>
      <table style={{flex:'0.5',borderRadius:'4px',boxShadow:'-1px 3px 4px 0px black'}}>
        <thead style={{textDecoration:'underline'}}>
          <tr>
            {this.headerArr}
          </tr>
        </thead>
        <tbody>
          {this.tableBody}
        </tbody>
      </table>
    </div>
  );
}

createTable() {
  this.headerArr = this.props.headerList.map((item,index)=>(
    <th key={index}>
      {item}
    </th>
  ));

  this.tableBody = this.filteredProdList.map((item,index)=>(
    <tr key={index} onMouseOver={this.onFocus} onMouseOut={this.onFocusRemove}>
      {Object.keys(item).map((key,index)=>(
        <td key={index}>{item[key]}</td>
      ))}
    </tr>
  ))
}

我正尝试使用此测试（Jest和Enzyme）脚本对此进行测试-

test('Grid filters properly',()=>{
  const gridWrapper=mount(<Grid headerList={['Id','Name','Stock']} prodList={items}/>);
  const textBoxWrapper=gridWrapper.find('#gridFilterText');
  textBoxWrapper.simulate('change',{target:{value:'p'}});  
  gridWrapper.update();
  console.log(textBoxWrapper.debug());

  expect(
    gridWrapper
    .find('table')
    .children()
    .find('tbody')
    .children()
  ).toHaveLength(2);
})

我想在这里实现的是-

渲染网格组件
grid组件中具有控件（不是子组件）
通过设置值（value ='p'）在控件上模拟OnChange
这应该使网格显示已过滤的输出（2行）

为什么仅当我使用mount时它才起作用，而当我使用浅表时它不起作用。根据我的理解，浅浅适用于组件，并且确实涉及子组件。在这种情况下，是组件的一部分而不是其子组件吗？

请让我知道是否可以进一步澄清。

浅呈现意外行为

0 个答案: