TypeError: Cannot read property 'prepareStyles' of undefined

Question

My Component looks like

import React, {PropTypes} from 'react';
import TransactionListRow from './TransactionListRow';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table';

const TransactionList = ({transactions}) => {
  return (
    <Table>
      <TableHeader displaySelectAll={false}>
        <TableRow>
          <TableHeaderColumn>Name</TableHeaderColumn>
          <TableHeaderColumn>Amount</TableHeaderColumn>
          <TableHeaderColumn>Transaction</TableHeaderColumn>
          <TableHeaderColumn>Category</TableHeaderColumn>
        </TableRow>
      </TableHeader>
      <TableBody>
        {transactions.map(transaction =>
          <TransactionListRow key={transaction.id} transaction={transaction}/>
        )}
      </TableBody>
    </Table>
  );
};

TransactionList.propTypes = {
  transactions: PropTypes.array.isRequired
};

export default TransactionList;

The test is

import {mount} from 'enzyme';
import TransactionList from './TransactionList';
import {TableHeaderColumn} from 'material-ui/Table';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

describe("<TransactionList />", ()=> {
  it('renders four <TableHeaderColumn /> components', () => {
    const wrapper = mount(<TransactionList transactions={[]}/>);
    expect(wrapper.find(TableHeaderColumn)).to.have.length(4);
  });
});

My dependencies are

 "dependencies": {
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "jquery": "2.2.3",
    "react": "15.3.2",
    "react-dom": "15.3.2",
    "react-redux": "4.4.5",
    "react-router": "2.8.1",
    "react-router-redux": "4.0.6",
    "redux": "3.6.0",
    "redux-thunk": "2.1.0",
    "toastr": "2.1.2",
    "react-tap-event-plugin": "^1.0.0",
    "material-ui": "0.15.4"
  }

When I run test I see

 1) <TransactionList /> renders four <TableHeaderColumn /> components:
     TypeError: Cannot read property 'prepareStyles' of undefined
      at Table.render (node_modules/material-ui/Table/Table.js:155:48)
      at node_modules/react/lib/ReactCompositeComponent.js:793:21
      at measureLifeCyclePerf (node_modules/react/lib/ReactCompositeComponent.js:74:12)
      at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:792:27)
      at ReactCompositeComponentMixin._renderValidatedComponent (node_modules/react/lib/ReactCompositeComponent.js:819:34)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:361:30)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at ReactCompositeComponentMixin.performInitialMount (node_modules/react/lib/ReactCompositeComponent.js:370:34)
      at ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:257:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:47:35)
      at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:105:32)
      at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:127:15)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
      at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:321:18)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:402:32)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:423:23)
      at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:84:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:175:26)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:87:59)
      at mount (node_modules/enzyme/build/mount.js:21:10)
      at Context.<anonymous> (TransactionList.test.js:7:1)

Please help me understand what is going wrong and how should I fix this? I am new to React and its ecosystem

Does this post help at all? https://github.com/callemall/material-ui/issues/5330 — Ben Hare, Oct 12 '16 at 21:16
everyone, the answer in bottom of this -> https://github.com/callemall/material-ui/issues/686, put the code to your class — Faisal Arkan, Feb 18 '17 at 10:12

albrnick · Answer 1 · 2017-02-19T20:18:43.827

65

You need to wrap your table in a MuiThemeProvider tag

like:

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

const TransactionList = ({transactions}) => {
  return (
    <MuiThemeProvider>
      <Table>
...
      </Table>
    </MuiThemeProvider>
  );
};

edited Feb 19 '17 at 20:18

answered Feb 19 '17 at 17:38

albrnick

1,151
11
15

cool.I am new material world.was stuck for 2 days with metor + react+matarial.I thought its metor issue. – RIYAJ KHAN Apr 20 '17 at 17:38

score 8 · Answer 2 · answered Apr 06 '18 at 04:56

If we follow the instructions in the order presented in the Material UI wesite, we can find the solution right there i.e. in the Usage section. They have declared the pre requisite of defining the theme as a Provider, prior to any component usage. These themes can also be customized.

http://www.material-ui.com/#/get-started/usage

Clearly stated with snippet -

import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

TypeError: Cannot read property 'prepareStyles' of undefined

2 Answers2

Linked