说我有以下应用程序:
class Child extends React.Component { render() { return ; } handleChildOnClick() { this.props.onChildClick('foo'); } } class Parent extends React.Component { render() { returnclick me ; } handleParentOnClick(text) { this.props.onParentClick(12345); } } class App extends React.Component { render() { returnconsole.log(num)} />; } }
我很难找到测试Parent
组件的正确方法.在Child
和App
一个都没有问题,但Parent
...
我的意思是,如何测试Child
组件上的单击是否将调用Parent
单击回调而不:
...渲染Child
.Parent
应该作为浅层渲染单独测试.Child
也将进行单独测试,如果我进行了渲染渲染,我基本上是在Child
两次测试点击回调.
...直接调用handleParentOnClick
的Parent
实例.我不应该依赖Parent
于此的确切实施.如果我更改了回调函数的名称,测试将会中断并且很可能是误报.
有第三种选择吗?
在测试时Parent
,您可以:
import { shallow } from 'enzyme'; import { stub } from 'sinon'; describe('', () => { it('should handle a child click', () => { const onParentClick = stub(); const wrapper = shallow( ); wrapper.find("Child").prop('onChildClick')('foo'); expect(onParentClick.callCount).to.be.equal(1); // You can also check if the 'foo' argument was passed to onParentClick }); });