React Testing:React Shallow Rendering单元测试中的事件处理程序

Question

背景

我正在尝试学习如何使用React Shallow Rendering TestUtil并让测试通过,直到我onClick向两者添加了一个事件处理程序; 似乎在Accordion.toggle我试图在Accordion.test.jsvs this.toggle中使用的函数必定存在一些差异Accordian.js......但我无法弄明白.

题

如何通过两个突出显示的测试Accordian.test.js？

重现步骤

1. 克隆https://github.com/trevordmiller/shallow-rendering-testing-playground
2. npm install
3. npm run dev - 当您单击"Lorem Ipsum"时,看到该组件正常工作
4. npm run test:watch - 看到测试失败了

Answer 1

有许多问题阻止您的测试通过.

查看测试"默认情况下应该处于非活动状态":

1. Accordion.toggle在您的测试中是Accordion类的属性,并且this.toggle在您的代码中是Accordion类的实例的属性- 所以在这种情况下,您正在比较两个不同的东西.要在测试中访问"实例"方法,可以替换Accordion.toggle为Accordion.prototype.toggle.如果不是this.toggle = this.toggle.bind(this);在你的构造函数中,哪个会工作.这引出了我们的第二点.

2. 当您在函数上调用.bind()时,它会在运行时创建一个新函数 - 因此您无法将其与原始函数进行比较Accordion.prototype.toggle.解决这个问题的唯一方法是从渲染结果中拉出"绑定"函数:

   let toggle = result.props.children[0].props.onClick;
   
   assert.deepEqual(result.props.children, [
     <a onClick={toggle}>This is a summary</a>,
     <p style={{display: 'none'}}>This is some details</p>
   ]);
   

至于你的第二次失败测试"点击时应该变为活动状态":

1. 你试着调用result.props.onClick()哪个不存在.你想打电话result.props.children[0].props.onClick();

2. React中存在一个错误,它需要在使用浅渲染调用setState时声明全局"文档"变量 - 如何在每种情况下解决这个问题都超出了这个问题的范围,但是快速解决方法让你的测试通过是global.document = {};在调用onClick方法之前添加.换句话说,您的原始测试有:

   result.props.onClick();
   

   现在应该说:

   global.document = {};
   result.props.children[0].props.onClick();
   

   请参阅"修复损坏的setState()" 这个页面上,并对此做出何种反应的问题.