1

以下は私のReactコンポーネントです：

import React from 'react'

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

module.exports = PageLeftLower;

とてもシンプルな 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); 
  });
});

これを実行すると、次の警告が出力されます。

Component : WholeTab 警告: React.createElement: type は null、undefined、boolean、または number であってはなりません。文字列 (DOM 要素の場合) または ReactClass (複合コンポーネントの場合) である必要があります。

そして次のエラー：

TypeError: 未定義のプロパティ 'propTypes' を読み取れません。

どんな助けでも大歓迎です。

4

1 に答える 1

4

問題はここにあります：

import {PageLeftLower} from './PageLeftLower';

コンポーネントを次のように直接エクスポートしているためです。

module.exports = PageLeftLower;

次のようにオブジェクトにラップされていません。

module.exports = {PageLeftLower: PageLeftLower};

したがって、コンポーネントには次の方法でアクセスできます。

import PageLeftLower from './PageLeftLower'; // not {PageLeftLower}
于 2016-08-03T10:53:02.010 に答える