0

React コンポーネントのテストを作成しようとしています。このエラーが発生しています：

TypeError: 未定義のプロパティ 'pushState' を読み取ることができません

私のコードは次のようになります。

"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ですか？もしそうなら、どうすればそれを嘲笑できますか？

4

2 に答える 2

1

これは、React-router のHistory mixinをコンポーネントに追加していないためだと思います。

例：

import { History } from 'react-router'

React.createClass({
    mixins: [ History ],
    render() {
        return (
            <div>
                <div onClick={() => this.history.pushState(null, '/foo')}>Go to foo</div>
                <div onClick={() => this.history.replaceState(null, 'bar')}>Go to bar without creating a new history entry</div>
                <div onClick={() => this.history.goBack()}>Go back</div>
            </div>
        )
    }
})
于 2015-12-08T01:44:48.150 に答える
0

履歴は、ルーターがインスタンス化されたときに作成する必要があります。各ルートがヒットすると、履歴がプロパティとしてコンポーネントに渡されます。また、pushState は非推奨であり、現在は push のみを使用していることにも注意してください。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>
    );
  }
});
于 2015-12-08T22:08:26.380 に答える