不变违规：ReactShallowRenderer render（）

Question

我正在为以下reactjs文件编写unitTest脚本。

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>
        );
    }
}

以下是uniTest示例，尽管我可以做如下。

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);                     
    });
});

但是，当我运行测试时，出现错误

不变违规：ReactShallowRenderer render（）：浅渲染仅适用于自定义组件，不适用于基元（详细信息）。而不是调用.render(el)和检查渲染的输出，el.props而是直接查看 。

请问我哪里出错了？如何为上述脚本编写unitTest。任何帮助将不胜感激。

更新资料

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(<Collapsible title="MyTitle"><span>HEllo</span></Collapsible>);
        let actualElement = renderer.getRenderOutput();
        let expectedElement = (<details><summary></summary></details>);
        expect(actualElement).toEqual(expectedElement);                     
    });
});

当我运行上面的代码时，我得到

无法读取undefined的属性'propTypes'。我想可能是我必须通过title和props.children，因为他们是可折叠房屋的财产。请怎么做？

Answer 1

您没有Collapsible在测试中使用您的元素，这就是您收到该错误的原因。

使用任何原始元素（基本上是任何 HTML 标签）都会收到错误消息，您只能将自己的组件传递给浅层渲染器。

renderer.render(<Collapsible />);