不变违规：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);                     
    });
});

但是，当我运行我的测试时，我得到了错误

Invariant Violation: 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 ，因为它们是 Collapsible 中的属性。请问怎么做？

Answer 1

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

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

renderer.render(<Collapsible />);