React Enzyme Type错误:无法读取未定义的属性'propTypes'

[英]React Enzyme Type Error:Cannot read property 'propTypes' of undefined


The following is my React Component:

以下是我的React组件:

import React from 'react'

var PageLeftLower = React.createClass({
  render:function(){
    return(<a href="#">Quote Requests</a>);
  }
});

module.exports = PageLeftLower;

So, very simple React component. I am just getting started with testing using Enzyme and Mocha and have written the following code.

所以,非常简单的React组件。我刚刚开始使用Enzyme和Mocha进行测试并编写了以下代码。

import expect from 'expect';
import React from 'react';
import {shallow} from 'enzyme';
import {PageLeftLower} from './PageLeftLower';

describe('Component : WholeTab',() => {
  it('renders without exploding', () => {
    expect(shallow(<PageLeftLower/>).length).toEqual(1); 
  });
});

This when I execute it, it outputs the following warning:

当我执行它时,它会输出以下警告:

Component : WholeTab Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

组件:WholeTab警告:React.createElement:type不应为null,undefined,boolean或number。它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件)。

and the following error:

并出现以下错误:

TypeError: Cannot read property 'propTypes' of undefined.

TypeError:无法读取未定义的属性“propTypes”。

Any help is highly appreciated.

任何帮助都非常感谢。

1 个解决方案

#1


2  

The problem is here :

问题出在这里:

import {PageLeftLower} from './PageLeftLower';

because you are exporting directly your component with :

因为您直接导出组件:

module.exports = PageLeftLower;

It is not wrapped in an Object like this :

它不包含在这样的对象中:

module.exports = {PageLeftLower: PageLeftLower};

So your component is accessible with :

因此,您的组件可通过以

import PageLeftLower from './PageLeftLower'; // not {PageLeftLower}

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/08/02/be6a175763e9ceba9851d25ccb23bfe6.html



 
  © 2014-2022 ITdaan.com