Wrapper.find 没有找到类

IT技术 reactjs testing enzyme
2021-04-27 18:01:17

这是我的组件:

const User = ({ users }) => (
  <div className="displayContainer">
    {users &&
     users.length > 0 &&
     users[0].username ?
     <div className="userOnShow">
       <img className="userImage"alt="no image yet"/>
       <div>{users[0].username}, {users[0].age}</div>
     </div>
     :
     <div className="noOneLeft">
      {'Sorry, no new people in your area'}
     </div>
    }
  </div>
)

我有2个问题。我应该测试什么样的东西?即只是它呈现某些类等?

我假设测试三元将是一个集成测试?

还有我的主要问题,当我这样做时:

describe.only('DisplayingUser', () => {
  let wrapper;
  const usersStub = {remainingUsers: []}
  it('expects the props to be correct', () => {
    wrapper = shallow(
      <User
        users={usersStub}
      />
    )
    const userClass = wrapper.find('.userOnShow')
    console.log(userClass, 'uc');
    expect(userClass.length).to.equal(1)
  });
})

它没有说expected 0 to equal 1,即它没有找到我的class,但显然它在那里?

1个回答

我有同样的问题,这是因为浅不呈现整个组件。相反,它仅呈现 1 级深度。例如,如果我们有

wrapper = shallow(<Component store={store}/>);
expect(wrapper.find('.foo')).toHaveLength(1);

在组件中我们有

export class Component {
  render(){
  return(
  <div>
      <div>
           <p className="foo">foo</p>
      </div>
  </div>)}}

它不会找到该foo元素,因为它在第二个 div 中,这意味着它在第一个 div 中dive()

要找到类元素,.foo我们需要调用:

wrapper = shallow(<Component store={store}/>).dive();

所以请记住,基本的浅层渲染只是第一个深度,.dive()再进一步.dive().dive()给你两个步骤(两个div内部)等等。因此,当您搜索元素时,请注意该元素包含的级别。