单元测试反应动作 - browserHistory 未定义

Posted 2023-02-21

【中文标题】单元测试反应动作 - browserHistory 未定义

【英文标题】：Unit testing react actions - browserHistory is undefined

【发布时间】：2016-10-16 08:28:47

【问题描述】：

我为我的行为编写测试，使用

 browserHistory  from 'react-router';

当我运行测试时，导入的 browserHistory 因未知原因未定义。因此，测试抛出一个错误——“无法读取未定义的属性‘push’”； 我不知道，为什么 browserHistory 未定义，如果它在我的应用程序中有效。有人可以帮帮我吗？

【参考方案1】：

我猜你没有使用 karma 或任何浏览器来运行你的测试。如果没有浏览器，对象 browserHistory 将是未定义的。您可能需要使用 sinon 来存根您的 browserHistory。以下内容可能会有所帮助：

import chai from 'chai';
import sinonChai from 'sinon-chai';
import componentToTest from './component-to-test'
import sinon from 'sinon';
import * as router from 'react-router';

var expect = chai.expect;
chai.use(sinonChai);

describe('Test A Component', () => 

    it('Should success.', () => 
        router.browserHistory =  push: ()=> ;
        let browserHistoryPushStub = sinon.stub(router.browserHistory, 'push', () =>  );
        //mount your component and do your thing here
        expect(browserHistoryPushStub).to.have.been.calledOnce;

        browserHistoryPushStub.restore();
    );

);

【讨论】：

我在这个答案中的关键是导入整个router 而不仅仅是browserHistory 或hashHistory，这就是我试图模拟它的方式。

【参考方案2】：

使用手表（npm run test -- --watch）时，我不得不保存并恢复原来的router.browserHistory以避免Invariant Violation（下）。

import * as router from 'react-router'

describe('some description', () => 
  const oldBrowserHistory = router.browserHistory
  after(() =>  router.browserHistory = oldBrowserHistory )

  it('some expectation', () => 
    const spy = sinon.spy()
    router.browserHistory =  push: spy 

    // call your code here

    expect(spy.withArgs(expectedArgs).calledOnce).to.be.true
  )
)

Invariant Violation：您提供了一个使用历史 v2.x 或更早版本创建的历史对象。这个版本的 React Router 只兼容 v3 历史对象。请升级到历史 v3.x。

（感谢 user3682091 让我开始走上正确的道路）