Question

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

{ browserHistory } from 'react-router';

当我运行我的测试时，导入的browserHistory由于未知原因未定义。因此，测试会抛出一个错误 - “无法读取属性'推送'的未定义”; 我不知道，为什么browserHistory未定义，如果它在我的应用程序中工作。有人可以帮帮我吗？

Answer 1

我猜你不会使用业力或任何浏览器来运行测试。如果没有浏览器，则对象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();
    });

});

Answer 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
  })
})

不变违规：您提供了使用历史记录v2.x或更早版本创建的历史记录对象。此版本的React Router仅与v3历史对象兼容。请升级到历史记录v3.x。

（感谢user3682091让我开始使用正确的路径）

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

2 个答案: