测试state更新

Question

老师有遇到一个测试问题卡住
在最后提交编辑的时后，toHaveBeenCalledWith有被呼叫，但newItem的资料不一样(是旧的)
似乎是state 没有更新，想问说像这种情况mock方法要怎么去测props回调的参数传出去是对的

之前遇到hook function不能测state时，折腾了几天才了解可以测props就好
传进来的props测没问题，但props的回调参数揣摩之前讲的用mock的方法发现会不好使…
然后原本有用老师说文檔的act跟update(hooks support)，以为可以触发更新?

源码
LedgerForm.test.js

Answer 1

张轩 2020-12-18 10:39:23

同学你好 我不清楚我是否理解你的意思 测试给你修改好了 文档在这里：https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/simulate.html#example-functional-component

it('submit with change value should trigger callback with right object',()=>{
    wrapper2.find('#inputTitle').simulate('change',{ target:{value:'工資'}});
    wrapper2.find('#inputAmount').simulate('change',{ target:{value:'2000'}});
    wrapper2.find('#inputDate').simulate('change',{ target:{value:'2020-12-13'}});
    wrapper2.find('#submit').simulate('click');
    // const newItem = {...testItems[0],title:'工資',amount:2000,date:'2020-12-13'};
    // expect(props.onFormSubmit).toHaveBeenCalledWith(newItem);//%%Number of calls: 0
    wrapper2.update();
    // wrapper2 =  wrapper2.update();
    const newItem = {...props_with_item.ledgerItem,title:'工資',amount:2000,date:'2020-12-13'};
    // expect(props_with_item.onFormSubmit).toHaveBeenCalledWith(newItem);//@@哪個好
    expect(wrapper2.props().onFormSubmit).toHaveBeenCalledWith(newItem);
})

不是所有的更新都必须使用 act 包裹和 调用 update方法的，上次是因为我们创建了自定义的 mock 对象，这里 enzyme 的 simulate 已经在内部帮我们处理掉了。

所以如果你写的是 function component，多关注 enzyme 的文档，它上面已经有好多新的测试方法啦。

• 提问者 慕瓜5414566 #1

  用老师的代码揣摩，最后才发现有异步的问题，加上setTimeout最后receive的newItem成功跟expect一样了
  setTimeout(()=>{      expect(wrapper2.props().onFormSubmit).toHaveBeenCalledWith(newItem,true);},1000)
  然后官网的英文写很抽象，整个理解困难><
  老师再我说说我的理解，看有没有错，act包裹是像状态更新或是要取得dom元素(之前mock对象)需要用，然后16.8以上用.mount来挂载，像.simulate(), .setProps(),等才可以不用包裹，wrapper.update()则是触发状态更新后的渲染这样，最后谢谢有老师协助!