3

我目前正在尝试将 Jest 测试添加到 React 应用程序（在此处找到）。

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

/** @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 包含一个使用 react-router 进行身份验证的 mixin。根据我自己的调试，我发现当 Jest 尝试调用makeHrefreact-router 的内置导航方法之一时发生错误。

为了解决这个问题，我首先尝试调用jest.dontMock('react-router')，但这没有任何效果。问题似乎是，通过不嘲笑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. React 团队this.context从 .9 版本开始就弃用了，所以我相信这可能是问题的根源。因此，欢迎任何解决方法或修复this.context方法。

4

2 回答 2

2

我继续进行了修复，使您仍然可以使用 Jest。

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

于 2015-05-25T18:25:59.297 回答
1

在创建此处发现的问题后，我最终在 rackt-router 的创建者的帮助下解决了这个问题：https ://github.com/rackt/react-router/issues/465 。

我通过使用 Karma 和 Jasmine 来测试我的应用程序来解决这个问题。然后我使用了在这里找到的存根函数 makeStubbedDescriptor：https ://gist.github.com/rpflorence/1f72da0cd9e507ebec29 。

于 2014-11-17T19:48:23.160 回答