Invariant Violation: ReactShallowRenderer render()

I am writing a unitTest script for the following reactjs file.

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 the uniTest Example Here , i though i could do like below.

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

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

However, when i run my test , i get the error

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

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