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

1
votes

The following is my React Component:

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.

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).

and the following error:

TypeError: Cannot read property 'propTypes' of undefined.

Any help is highly appreciated.

1
javascriptnode.jsreactjsmocha.jsenzyme

1 Answers

4
votes

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}