Reactjs: TypeError: Unable to read propTypes property from undefined

Question

Please, I ask you to write unitTest for the next page.

export default class Collapsible extends React.Component { static propTypes = { title: React.PropTypes.string, children: React.PropTypes.any, }; render() { const { title } = this.props; return ( <details> <summary>{title}</summary> {this.props.children} </details> ); } } 

Following tut here I wrote my test below how

 describe('Collapsible', ()=>{ it('works', ()=>{ let renderer = createRenderer(); renderer.render(<Collapsible title="MyTitle"><span>HEllo</span></Collapsible>); let actualElement = renderer.getRenderOutput(); let expectedElement = (<details><summary>title</summary>Details</details>); expect(actualElement).toEqual(expectedElement); }); }); 

However, my test throws an error in the title above, I suspect that my details on the assembly (for example, the title and children) are not assigned from the test. Please, how do I refer to this? Any help or guidance would be greatly appreciated.

Answer 1

Thank you for your time. Turns out I'm misplacing the assembly in a test file. Below is how I imported before

 import React from 'react'; import expect from 'expect'; import {createRenderer} from 'react-addons-test-utils'; import { Collapsible } from '../Collapsible.js'; 

After switching to

 import React from 'react'; import expect from 'expect'; import {createRenderer} from 'react-addons-test-utils'; import Collapsible from '../Collapsible'; 

It seems to have worked. I imported the assembly as an existing variable / object before. After reading the documents and several tutorials, I understood.

Answer 2

Per documents , one way to define details with ES6 classes is as follows:

 export default class Collapsible extends React.Component { render() { const { title } = this.props; return ( <details> <summary>{title}</summary> {this.props.children} </details> ); } } Collapsible.propTypes = { title: React.PropTypes.string, children: React.PropTypes.any, };