Wrapper.find找不到类 [英] Wrapper.find not finding class

问题描述

这是我的组件:

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个问题.我应该测试什么样的东西?即仅仅是它呈现某些类等?

I have 2 questions. what sort of things should I test? i.e. just that it renders certain classes etc?

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

I'm assuming testing the ternary would be an integration test?

还有，我的主要问题是:

also and my main question, when i do:

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)
  });
})

它无法说出期望0等于1 ，即它没有找到我的班级，但显然在那里?

it fails saying expected 0 to equal 1, i.e. it hasn't found my class, but clearly its there?

推荐答案

我遇到了同样的问题，这是因为浅层无法渲染整个组件.而是仅渲染1级深度.例如，如果我们有

I had a same problem, and it is because shallow don't renders the whole component. Rather it renders only 1 level deep. So for example if we have

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()中.

it wont find the foo element because it is in the second div it means it is in the first dive().

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

To find the class element .foo we will need to call:

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

因此请记住，基本浅层仅渲染第一个深度， .dive()给您进一步的步骤 .dive().dive()给您两个步骤(里面的两个 div )，依此类推.因此，当您搜索元素时，请注意该元素包含在哪个级别.

So remember that basic shallow renders just the first depth, .dive() give you one step further .dive().dive() gives you two steps (two div inside) and so on. So when you search element be careful in what level that element is contained.

这篇关于Wrapper.find找不到类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！