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

跟随tut Here我在下面写了我的测试，如

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

然而，我的测试是在上面的标题中抛出错误，我怀疑我的折叠上的道具（即标题和孩子）没有从测试中分配。请问我该如何解决这个问题？任何帮助或指导都将受到高度赞赏。

Answer 1

感谢您的所有时间。事实证明我错误地将Collapsible导入测试文件。以下是我之前的导入方式

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

更改为

后

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

似乎有效。我以前导入Collapsible作为现有的变量/对象。通过阅读文档和很少的教程，我意识到。

Answer 2

Per the docs，使用ES6类定义道具的一种方法如下：

export default class Collapsible extends React.Component {
    render() {
        const { title } = this.props;
        return (
            <details>
                <summary>{title}</summary>
                {this.props.children}
            </details>
        );
    }
}

Collapsible.propTypes = {
    title: React.PropTypes.string,
    children: React.PropTypes.any,
};

Reactjs：TypeError：无法读取未定义

2 个答案: