2

Say I have the following component:

export default class CustomInput extends PureComponent {
  render () {
    return (
      <input type='text' value={this.props.value || ''} onChange={this.props.changeHandler} placeholder={this.props.placeholderValue} />
    )
  }
}

CustomInput.propTypes = {
  value: PropTypes.string,
  placeholderValue: PropTypes.string,
  changeHandler: PropTypes.func.isRequired
}

Which I attempt to test as follows:

test('input renders correctly', () => {
    const handler = jest.fn()
    const display = shallow(<CustomInput value='foo' placeholderValue='bar' changeHandler={handler}/>)
    })

This fails with:

TypeError: Cannot read property 'contextTypes' of undefined

Any help would be much appreciated!

Abraham P
  • 15,029
  • 13
  • 58
  • 126

1 Answers1

1

So it turns out that the problem was with my import. Specifically, removing the autoimport like so:

import CustomInput from './index'

rather than

import {CustomInput} from './index'

An explanation of what caused the problem in the first place would be more than welcome

Abraham P
  • 15,029
  • 13
  • 58
  • 126
  • read this one: https://danmartensen.svbtle.com/build-better-apps-with-es6-modules – Mayank Shukla Feb 08 '17 at 17:02
  • there are two types of export, `default` and `named`, you are exporting the comp `CustomInput` as default and importing as the named because of that the issue u was facing. default export can be only one but named can be any number. The way you wrote 2nd line is, it was searching for a name export but no named export is defined, so it throws the error :) – Mayank Shukla Feb 08 '17 at 17:05
  • check this: http://stackoverflow.com/questions/36426521/what-export-default-do-in-jsx – Mayank Shukla Feb 08 '17 at 17:11