Wrapper.find 未找到类

Question

这是我的组件：

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，即它还没有找到我的班级，但显然它在那里？

Answer 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内部两个），依此类推。因此，当您搜索元素时，请注意该元素包含在哪个级别。