用 Jest & Enzyme 测试 React 组件：在哪里测试是否给出了组件道具

Question

当使用 Jest & Enzyme 为 React 组件编写测试时，哪些测试应该负责确保组件被赋予某些 props？

<App>
  <Somewhere>
    <MyNestedComp someProps={someValue} />
  </Somewhere>
</App>

在上面的例子中，我们应该在哪里测试以确保MyNestedComp被赋予someProps属性。目前，我测试了我的每个组件，有时对在哪里测试这些细节有点困惑。

Answer 1

您应该首先开始测试传递 prop 的组件本身，无论传递的 prop 是否在组件本身中可用，它是否正确呈现了相应的 html。

您可以使用酶的浅层渲染将自己限制在要测试的特定成分上。

例如

假设在MyNestedComp中，我正在使用传递的prop someProps显示在某个html元素中。

const MyNestedComp = ({someProps}) => {
return (
        <div> 
           <h1>{someProps}</h1>
        </div>
  )
}

MyNestedComp 的单元测试可以写成 -

const wrapper = shallow(<MyNestedComp someProps={"someValue"} />);
expect(wrapper.html()).to.equal('<div><h1>someValue</h1></div>');

然后，您也可以为父组件编写测试用例，以及示例中Somewhere的测试用例。您可以检查从父组件传递到子组件的 prop 是否正确到达子组件，并且还可以使用许多其他测试用例。

  <Somewhere>
    <MyNestedComp someProps={someValue} />
  </Somewhere>

某处的单元测试用例可以写成 -

const wrapper = shallow(       
      <Somewhere>
        <MyNestedComp someProps={someValue} />
      </Somewhere>
);
const childWrapper = wrapper.find('MyNestedComp');
expect(childWrapper).to.have.length(1);
expect(wrapper.find({someProps: 'someValue'})).to.have.length(1);
expect(wrapper.prop('someProps')).to.equal("someValue");

我希望它对你有所帮助。