Javascript 如何测试调用其父函数的React组件，该组件会更改组件上的道具？

问题是：

• 组件子级的道具作为父级状态的值传递
• Child有一个方法调用父对象上的方法，该方法更新父对象的状态
• 当父对象的状态更新时，子对象的某个属性值会更改。如：

测试此过程是否按预期进行的正确方法是什么

下面是一些示例代码，让问题更清楚：

//App.js
从“React”导入React，{Component}；
从“./Content”导入内容；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
页面：'主页'，
}
}
gotoAbout（）{
这是我的国家({
页面：'关于'，
})
}
render（）{
返回(
)
}
}

我通常首先使用浅层渲染及其预期功能单独测试组件，然后使用组合测试组件

e、 g测试

内容

组件

1.测试其在道具或状态变化时是否正常工作

2.通过模拟测试是否正确执行事件，如按钮点击或任何其他事件

const wrapper
= shallow(
          <Content 
              page={"home"}
              gotoAbout={()=>{ console.log("fake goAbout")}} 
         />
  );

类似地，测试其他属性

page={“about”}

内容是否正确呈现

wrapper.setProps({ page: 'about' });

expect(wrapper.containsMatchingElement(
          <p>this is the about content</p>
)).to.equal(true);

之后，您可以开始测试

应用程序

组件

const wrapper = shallow(<App />);
const childWrapper = wrapper.find('Content');

可能还有其他更好的方法可用于测试react组件，这些只是简单的测试示例。 酶提供了很多方法来测试你的成分，我想没有硬性规定。但您至少应该测试组件的预期功能和特性

const wrapper = shallow(<App />);
const childWrapper = wrapper.find('Content');

此外，您的测试用例确保对组件所做的任何新更改都不会违反您的测试规范

wrapper.find('button').simulate('click');

const wrapper = shallow(<App />);
const childWrapper = wrapper.find('Content');

const twrapper
= shallow(
          <Content 
              page={"home"}
              gotoAbout={()=>{ console.log("fake goAbout")}} 
         />
  );

expect(twrapper.html()).to.equal(childWrapper.html());

expect(childWrapper.prop('page')).to.equal("home");