javascript - 如何使用浅( enzyme )模拟从渲染方法调用的方法

Question

我需要 Mock getZvalue，所以当我基于 z 值进行浅层处理时，我会尝试渲染一些不同的东西。我如何测试它。下面是示例代码。我可以监视此方法以返回一个值吗

class AbcComponent extends React.Component{
  render(){
    const z= this.getZValue();
    return <div>{z}</div>

  }

  getZValue(){
    //some calculations 
    }
  }


describe('AbcComponent',()=>{
  it('Test AbcComponent',()=>{
    const wrapper= shallow<AbcComponent/>
  })
})

Answer 1

这个怎么样？

import { spy } from 'sinon';
describe('AbcComponent',()=> {
  it('Test AbcComponent',()=> {
    spy(AbcComponent.prototype, "getZValue");
    const wrapper= shallow<AbcComponent/>
    expect(AbcComponent.prototype.getZValue.callCount).to.equal(1);
    AbcComponent.prototype.getZValue.restore();
  })
})

除此之外，您可以按如下方式使用返回值进行测试，

   import { stub } from 'sinon';
    describe('AbcComponent',()=> {
      it('Test AbcComponent',()=> {
        stub(AbcComponent.prototype, "getZValue").returns(10);
        const wrapper= shallow<AbcComponent/>
        expect(AbcComponent.prototype.getZValue.callCount).to.equal(1);
        AbcComponent.prototype.getZValue.restore();
      })
    })