使用 Jest 和 Enzyme 测试 React 组件：在哪里测试是否给出了组件 props答案

【问题标题】：Testing React components with Jest & Enzyme: where to test whether component props were given使用 Jest 和 Enzyme 测试 React 组件：在哪里测试是否给出了组件 props
【发布时间】：2017-06-29 09:36:10
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs testing components jestjs enzyme

【解决方案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>

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

希望对你有帮助。

【讨论】：