React.js тестирует TypeError: невозможно прочитать свойство pushState неопределенного

Я пытаюсь написать тесты для своего компонента 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? Если да, то как я могу издеваться над этим?


reactjs jestjs react-router react-router-component
person Nagalakshmi Srirama    schedule 07.12.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

История должна создаваться при создании экземпляра маршрутизатора. При выполнении каждого маршрута история передается компоненту в качестве реквизита. Следует также отметить, что 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>
    );
  }
});
person Jordan Papaleo    schedule 08.12.2015
comment
идеально! когда вы пишете тест для этого компонента, используя sinon и chai Могу ли я узнать, как вы можете издеваться над this.props.history.push('app') - person Nagalakshmi Srirama; 09.12.2015
comment
Я еще не писал тесты для этого. Это обновление было совсем недавно. - person Jordan Papaleo; 10.12.2015

arrow_upward
1
arrow_downward

Я бы сказал, что это потому, что вы не добавляете React-router Примешивание истории к вашему компоненту.

Пример:

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>
        )
    }
})
person André Pena    schedule 08.12.2015
comment
похоже, миксины больше недействительны... medium.com/@dan_abramov/ - person Nagalakshmi Srirama; 08.12.2015
comment
Это правда. Реагируйте на изменения так быстро. - person Nagalakshmi Srirama; 05.05.2016