reactjs - React单元测试，无法读取未定义React路由器的 'push'

Question

我有一个使用 react 路由器的组件，如下所示:

_viewCompany(companyId) {
    this.context.router.push(`/admin/companies/${companyId}`);
}

它在组件中运行得很好，但是在为组件编写测试时遇到了错误。这是导致问题的测试(我使用的是 enzyme 、jest、sinon):

    it('should call _viewCompany', () => {
        jest.spyOn(CompaniesList.prototype, '_viewCompany');
        wrapper = mount(<CompaniesList {...props}/>);
        const viewButton = wrapper.find('.btn-info').at(0);
        viewButton.simulate('click');
        expect(CompaniesList.prototype._viewCompany).toHaveBeenCalled();
    });

此测试返回一个错误，内容如下:

无法读取未定义的属性“push”

我可以做些什么来模拟它或为测试创建一个空函数吗？

Answer 1

安装组件时您需要传递上下文对象。

function Router () {
   this.router = [];

   this.push = function(a) {
     this.router.push(a);
   };

   this.get = function(index){
      return this.router[index];
   }
    this.length = function(){
     return this.router.length;
   }
}

function History () {
   this.history = [];

   this.push = function(a) {
    this.history.push(a);
    };

    this.get = function(index){
     return this.history[index];
    }
   this.length = function(){
      return this.history.length;
   }
}

it('should call _viewCompany', () => {
    jest.spyOn(CompaniesList.prototype, '_viewCompany');
    wrapper = mount(<CompaniesList {...props}/>,{context:{router: new 
                Router(), history: new History()}});
    const viewButton = wrapper.find('.btn-info').at(0);
    viewButton.simulate('click');
    expect(CompaniesList.prototype._viewCompany).toHaveBeenCalled();
    expect(wrapper.context().router.length()).toEqual('1');
});

您甚至还可以测试上下文对象。就像我上面做的那样。