Question

使用 Jest＆amp; amp;编写React组件的测试时酶，哪些测试应该负责确保组件被赋予某些道具？

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

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

Answer 1

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

您可以使用酶的浅渲染来限制您自己测试的特定组件。

e.g

假设 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");

我希望它可以帮到你。

使用Jest＆amp; amp;测试React组件酶：在哪里测试是否给出了组件道具

1 个答案: