React-redux-starter-kit: Test will throw an error if i declare components as classes

Created on 17 Nov 2016  路  1Comment  路  Source: davezuko/react-redux-starter-kit

PhantomJS will throw :undefined is not an object (evaluating 'Component.contextTypes')
My component is

import React, {Component, PropTypes} from 'react'
export default class InputText extends Component {
  constructor (props, context) {
    super(props, context)
    this.state = {}
  }
  render () {
    return (
      <input type="text" />
    )
  }
}

How can i test such components or how should i modify test-bundler.js ?

Most helpful comment

This error can occur when you have a bad import, so double check your paths and variable names. I just tested with the counter as a class and it worked as expected:

import React from 'react'

export class Counter extends React.Component {
  render () {
    return (
      <div style={{ margin: '0 auto' }} >
        <h2>Counter: {this.props.counter}</h2>
        <button className='btn btn-default' onClick={this.props.increment}>
          Increment
        </button>
        {' '}
        <button className='btn btn-default' onClick={this.props.doubleAsync}>
          Double (Async)
        </button>
      </div>
    )
  }
}

Counter.propTypes = {
  counter     : React.PropTypes.number.isRequired,
  doubleAsync : React.PropTypes.func.isRequired,
  increment   : React.PropTypes.func.isRequired
}

export default Counter

Closing until further updates. Hope that helps!

>All comments

This error can occur when you have a bad import, so double check your paths and variable names. I just tested with the counter as a class and it worked as expected:

import React from 'react'

export class Counter extends React.Component {
  render () {
    return (
      <div style={{ margin: '0 auto' }} >
        <h2>Counter: {this.props.counter}</h2>
        <button className='btn btn-default' onClick={this.props.increment}>
          Increment
        </button>
        {' '}
        <button className='btn btn-default' onClick={this.props.doubleAsync}>
          Double (Async)
        </button>
      </div>
    )
  }
}

Counter.propTypes = {
  counter     : React.PropTypes.number.isRequired,
  doubleAsync : React.PropTypes.func.isRequired,
  increment   : React.PropTypes.func.isRequired
}

export default Counter

Closing until further updates. Hope that helps!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

macnibblet picture macnibblet  路  3Comments

brandonmikeska picture brandonmikeska  路  4Comments

BigPrimeNumbers picture BigPrimeNumbers  路  4Comments

glifchits picture glifchits  路  3Comments

jokeyrhyme picture jokeyrhyme  路  5Comments