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
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>
);
};
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')
);
来源：https://stackoverflow.com/questions/39863436/typeerror-cannot-read-property-preparestyles-of-undefined