javascript - 使react-router不破坏Jest(reactJs)测试

我目前正在尝试将Jest测试添加到React应用程序(找到here)。

但是，当我运行以下测试时，

/** @jsx React.DOM */

jest.dontMock('jquery');
jest.dontMock('../js/components/CategoryPage.jsx');
describe('Category Page', function() {
  var React = require('react/addons');
  var TestUtils = React.addons.TestUtils;
  var CategoryPage = require('../js/components/CategoryPage.jsx');
  it('renders into the page correctly', function() {
    // Render the CategoryPage into the document
    var categoryPage = TestUtils.renderIntoDocument(
      <CategoryPage params={{"category": "tests"}} />
    );
    expect(categoryPage).toBeDefined();
  });
});

我收到以下错误:

● Category Page › it renders into the page correctly
  - TypeError: Property 'makeHref' of object #<Object> is not a function
        at Navigation.makeHref (/home/stephen/reps/node_modules/react-            router/modules/mixins/Navigation.js:29:25)
        at React.createClass.getHref (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:76:17)
        at React.createClass.render (/home/stephen/reps/node_modules/react-router/modules/components/Link.js:97:18)
        at ReactCompositeComponentMixin._renderValidatedComponent (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:1260:34)
        at wrapper [as _renderValidatedComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
        at ReactCompositeComponentMixin.mountComponent     (/home/stephen/reps/node_modules/react/lib/ReactCompositeComponent.js:802:14)
        at wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
        at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
        at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)
        at ReactDOMComponent.Mixin.mountComponent (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:182:14)
        at ReactDOMComponent.wrapper [as mountComponent] (/home/stephen/reps/node_modules/react/lib/ReactPerf.js:50:21)
        at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/stephen/reps/node_modules/react/lib/ReactMultiChild.js:195:42)
        at ReactDOMComponent.Mixin._createContentMarkup (/home/stephen/reps/node_modules/react/lib/ReactDOMComponent.js:260:32)

我的应用程序和CategoryPage组件都专门使用react-router。 CategoryPage包含一个使用反应路由器进行身份验证的混入。根据我自己的调试，我发现当Jest尝试调用makeHref时发生错误，后者是react-router的内置导航方法之一。

为了解决这个问题，我首先尝试调用jest.dontMock('react-router')，但这没有任何效果。问题似乎在于，通过不 mock CategoryPage， Jest 将自动且不可逆地包含其所有依赖项，且不受模拟。

这个问题很难解决的部分原因是，大多数将Jest与React一起使用的人似乎没有在测试其组件，或者是因为他们不注重测试，或者是因为他们使用Flux而仅测试Stores，Dispatchers等。我们尚未使用Flux，因此这不是我们的选择，但可能是将来我们必须过渡的事情。

编辑1:如果删除了jest.dontMock('../js/components/CategoryPage.jsx')，则测试通过，但是实际上无法测试该组件的功能。

编辑2:当我排除jest.dontMock('jquery')时，我得到另一个与用于创建模态的mixin相关的错误:

Category Page › it encountered a declaration exception
- TypeError:
/home/stephen/reps/js/components/CategoryPage.jsx:
/home/stephen/reps/js/components/Feed.jsx:
/home/stephen/reps/js/components/InvestmentButton.jsx:
/home/stephen/reps/js/components/Modal.jsx:
/home/stephen/reps/js/mixins/BootstrapModalMixin.jsx:
/home/stephen/reps/node_modules/bootstrap/dist/js/npm.js:
/home/stephen/reps/node_modules/bootstrap/js/alert.js: Cannot call method 'on' of undefined

编辑3:我似乎已经隔离了该错误到react-router的Navigation mixin，它称为this.context.makeHref。从.9版本开始，React团队已弃用this.context，所以我相信这可能是问题的根源。因此，欢迎对this.context进行任何变通或修复。

最佳答案

我继续整理了一个修复程序，使您仍然可以使用Jest。

https://labs.chie.do/jest-testing-with-react-router/