请我为以下 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/