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中，这意味着它位于第一个dive()中。

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

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

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

Wrapper.find没找到课

1 个答案: