Invariant Violation: ReactShallowRenderer render()
<p>I am writing a unitTest script for the following reactjs file.</p>

<pre><code>export default class Collapsible extends React.Component {
    static propTypes = {
        title: React.PropTypes.string,
        children: React.PropTypes.any,
    };

    render() {
        const { title } = this.props;
        return (
            &lt;details&gt;
                &lt;summary&gt;{title}&lt;/summary&gt;
                {this.props.children}
            &lt;/details&gt;
        );
    }
}
</code></pre>

<p>Following the uniTest Example Here ,  i though i could do like below.</p>

<pre><code>import React from 'react'
import expect from 'expect'
import {createRenderer} from 'react-addons-test-utils'
import {Collapsible } from '../Collapsible.js'

describe('Collapsible', ()=&gt;{
    it('works', ()=&gt;{
        let renderer = createRenderer();
        renderer.render(&lt;details&gt;&lt;summary&gt;Title&lt;/summary&gt;Text&lt;/details&gt;);
        let actualElement = renderer.getRenderOutput();
        let expectedElement = (&lt;details&gt;&lt;summary&gt;&lt;/summary&gt;&lt;/details&gt;);
        expect(actualElement).toEqual(expectedElement);                     
    });
});
</code></pre>

<p>However, when i run my test , i get the error </p>

<blockquote>
  <p>Invariant Violation: ReactShallowRenderer render(): Shallow rendering
  works only with custom components, not primitives (details). Instead
  of calling <code>.render(el)</code> and inspecting the rendered output, look at
  <code>el.props</code> directly instead.</p>
</blockquote>

<p>Please where do i go wrong ? How do i write the unitTest for the script above. ?Any help would appreciated.</p>

<p><strong>Update</strong></p>

<pre><code>import React from 'react'
import expect from 'expect'
import {createRenderer} from 'react-addons-test-utils'
import {Collapsible } from '../Collapsible.js'

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

<p>When i run the code above, i get </p>

<blockquote>
  <p>Cannot read property 'propTypes' of undefined  . I am guessing may be i have to pass the title and props.children considering they are properties in Collapsible. Please how do do that?</p>
</blockquote>