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

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

无法读取未定义的属性'propTypes'。我猜可能是我必须通过标题和props.children考虑他们是可折叠的属性。请问怎么做？

Answer 1

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

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

renderer.render(<Collapsible />);

不变违规：ReactShallowRenderer render（）

1 个答案: