javascript - react : TypeError: Cannot read property 'propTypes' of undefined

标签 javascript unit-testing reactjs

请我为以下 reactjs 页面编写一个单元测试。

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

跟着啧啧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);                     
    });
});

但是,我的测试在上面的标题中抛出错误,我怀疑我在 Collapsible 上的 Prop (即标题和子项)没有从测试中分配。请问我该如何解决这个问题?非常感谢任何帮助或指导。

最佳答案

感谢您的宝贵时间。事实证明我错误地将 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 作为现有变量/对象导入。在阅读了文档和一些教程后,我意识到了。

关于javascript - react : TypeError: Cannot read property 'propTypes' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35027374/

相关文章:

javascript - 多个 Google 自动完成和地点搜索问题

android - 未生成 jacocoTestReport 任务

javascript - 警告 : setState(. ..):期望最后一个可选的回调参数是一个函数

reactjs - 如何使用 TypeScript 制作点击事件处理函数

ruby-on-rails - Fixture Class Not found 错误在简单的 Rails 测试中

javascript - React-Flux 存储 : collections vs specialized singletons

javascript - 将新的描边颜色注入(inject)到形状中

javascript - 如何将带有子项的 react-bootstrap 组件导入 kotlin-js react app

javascript - Webpack babel 转译为 es5 不太有效

asp.net-mvc - 测试使用DbContext的存储库的最佳方法