使 react-router 不破坏 Jest (reactJs) 测试
Make react-router not break Jest (reactJs) tests
我目前正在尝试将 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包含一个mixin,它使用react-router进行身份验证。根据我自己的调试,我发现当 Jest 尝试调用 makeHref
时会发生错误,这是 react-router 的内置导航方法之一。
为了解决这个问题,我首先尝试拨打jest.dontMock('react-router')
,但这没有任何效果。问题似乎在于,通过不嘲笑CategoryPage
,开玩笑将自动且不可逆转地包含其所有依赖项,而不会被嘲笑。
这个问题如此难以解决的部分原因是因为大多数使用 React 的 Jest 的人似乎没有测试他们的组件,要么是因为他们不那么专注于测试,要么是因为他们使用 Flux 并且只测试商店、调度程序等。我们还没有使用 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的导航mixin,它调用this.context.makeHref
。自 .9 版本以来,React 团队已弃用this.context
,因此我相信这可能是问题的根源。因此,欢迎对this.context
进行任何变通方法或修复。
我继续整理了一个修复程序,允许您仍然使用 Jest。
https://labs.chie.do/jest-testing-with-react-router/
在创建此处发现的问题后,我最终在机架路由器创建者的帮助下解决了这个问题:https://github.com/rackt/react-router/issues/465 .
我通过使用 Karma 和 Jasmine 来测试我的应用程序来解决这个问题。然后我使用了存根函数makeStubbedDescriptor在这里找到:https://gist.github.com/rpflorence/1f72da0cd9e507ebec29。
- 模糊事件的Javascript测试
- 我的单元测试选项是什么
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- 测试索引值是否等于某个数字的倍数
- ReactJS映射:如何仅在url变量不为空时呈现html链接
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 测试数组中每个项的内容
- 如何更改reactjs中外部/独立组件的状态或属性
- 测试ReactJs中使用的同构获取
- ReactJS:测试包含组件的组件
- 使 react-router 不破坏 Jest (reactJs) 测试
- 在没有节点的情况下测试Reactjs
- ReactJS的首选测试方法
- 在使用reactjs时,我可以把复杂的逻辑放在哪里,以便于测试
- 需要一些专注于ReactJS压力测试的例子
- ReactJS:如何测试状态变化
- reactJs测试模拟组件输入和响应,从哪里开始
- Reactjs中的测试窗口keydown事件
- undefined在使用Mocha测试ReactJS时不是一个函数