Wrapper.find 找不到类答案

【问题标题】：Wrapper.find not finding classWrapper.find 找不到类
【发布时间】：2018-02-01 14:58:28
【问题描述】：

这是我的组件：

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

【问题讨论】：

IMO - 三元组应该在你的单元测试中进行测试，因为你可以只传递存根数据，并且你想检查你的组件渲染你是否期望它。其次-您当前的存根内部没有用户-因此您将无法满足三元组第一部分的要求...因此userClass为空。我还会考虑更明确地命名您的测试，即“期望道具是正确的”并不能真正描述您在该测试中试图实现的目标。
@ajmajmajma 好的，非常感谢。但是，为什么找不到类名？
即使我把一个假用户放在那里，它也不会显示......
啊让它工作了，没有正确地存根。我有机会从你那里得到更多的建议吗？ @ajmajmajma 你有电子邮件、联系方式等吗？

标签： reactjs testing enzyme

【解决方案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 中，这意味着它在第一个 dive() 中。

要找到类元素.foo，我们需要调用：

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

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

【讨论】：