React.js测试TypeError:无法读取未定义的属性"pushState" [英] React.js tests TypeError: Cannot read property 'pushState' of undefined
问题描述
我正在尝试为我的React组件编写测试.我收到此错误:
I am trying to write tests for my React component. I am getting this error:
TypeError:无法读取未定义的属性"pushState"
TypeError: Cannot read property 'pushState' of undefined
我的代码如下:
"use strict";
var React = require('react');
var ProductAction = require('../actions/product');
var Router = require('react-router');
var PropTypes = Router.PropTypes;
var ImportProducts = React.createClass({
contextTypes: { history: PropTypes.history },
getInitialState: function () {
return {productList: ''};
},
handleClickImport: function (e) {
e.preventDefault();
ProductAction.importProducts(this.state.productList);
this.context.history.pushState(null, '/import_result');
},
handleClickCancel: function () {
this.setState({productList: ''});
},
onTextChange: function (evt) {
this.setState({productList: evt.target.value});
},
render: function () {
return (
<div>
<h3> Import Products </h3>
<textarea type='text' className='bigTxt' name='prodListTxt' value={this.state.productList} onChange={this.onTextChange} />
<div className='import-products-container'>
<input type='submit'className='srBtn' ref='import' onClick={this.handleClickImport} value='import'/>
<input type='submit'className='srBtn' ref='cancel' onClick={this.handleClickCancel} value='cancel'/>
</div>
</div>
);
}
});
module.exports = ImportProducts;
我的测试如下:
require('../test_dom')('<html><body></body></html>');
var chai = require('chai');
var expect = chai.expect;
var sinon = require('sinon');
var customRequire = require('../custom_require');
var proxyquire = require('proxyquire');
var reactRouterContext = require('../stubs/react_router_context');
var ReactDOMServer = require('react-dom/server');
chai.use(require('sinon-chai'));
describe('Page', function () {
var React;
var TestUtils;
var ReactRouterContext;
beforeEach(function () {
React = require('react/addons');
TestUtils = React.addons.TestUtils;
ReactRouterContext = reactRouterContext;
});
it('on import button click should clear value in product list', function () {
var productAction = customRequire.require('actions/product');
var actionsSpy = sinon.spy(productAction, 'importProducts');
var ParentComponent = proxyquire(customRequire.getPath('components/import_products.js'), {
'../actions/product': actionsSpy,
'react-router': require('react-router')
});
var element = TestUtils.renderIntoDocument(<ParentComponent />);
var textArea = TestUtils.findRenderedDOMComponentWithTag(element, 'textarea');
TestUtils.Simulate.change(textArea, { target: { value: '1, 2, 3'} });
var importButton = TestUtils.scryRenderedDOMComponentsWithClass(element, 'srBtn')[0];
console.log(importButton.value);
TestUtils.Simulate.click(importButton);
expect(actionsSpy.calledOnce).to.be.true;
expect(actionsSpy.withArgs('1, 2, 3').calledOnce).to.be.true;
});
看起来像this.context.history.pushState(null, '/import_result');行断了.仅当我运行测试时，this.context.history是未定义的，但是当我运行代码时，它是完全可以的.我应该嘲笑this.context吗?如果可以，我该如何嘲笑它?
Looks like this.context.history.pushState(null, '/import_result'); line is breaking. this.context.history is undefined only when I am running tests, but it is perfectly fine when I am running code. Should I mock this.context? If so how can I mock it?
推荐答案
应该在实例化路由器时创建历史记录.击中每条路线时，历史将作为道具传递给组件.还应该指出的是，pushState已被弃用，现在您只需要使用push.请参见 https://github.com/rackt/history/blob/master/docs/GettingStarted.md
The history should be created when the router is instantiated. As each route is hit, history is passed as a prop to the component. It should also be noted that pushState was deprecated and now you just use push. See Navigation at https://github.com/rackt/history/blob/master/docs/GettingStarted.md
// Index.js
import React from 'react';
import { Router, Route } from 'react-router';
import { createHistory } from 'history';
import App from './App.js';
const history = createHistory();
const routes = (
<Route to='/'>
<Route to='app' component='App' />
</Route>
);
React.render(<Router history={ history } routes={ routes } />, document.body);
// App.js
export default React.createClass({
onClick() {
this.props.history.push('app')
},
render() {
return (
<div onClick={this.onClick()}>Go to App</div>
);
}
});
这篇关于React.js测试TypeError:无法读取未定义的属性"pushState"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
