Mon Component
ressemble à
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;
Le test est
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);
});
});
Mes dépendances sont
"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"
}
Quand je lance le test, je vois
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)
Veuillez m'aider à comprendre ce qui ne va pas et comment dois-je résoudre ce problème? Je suis nouveau dans React
et son écosystème
Vous devez envelopper votre table dans une balise MuiThemeProvider
comme:
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
const TransactionList = ({transactions}) => {
return (
<MuiThemeProvider>
<Table>
...
</Table>
</MuiThemeProvider>
);
};
Si nous suivons les instructions dans l'ordre présenté dans le site Web Material UI, nous pouvons trouver la solution ici, c'est-à-dire dans la section Utilisation. Ils ont déclaré la condition préalable à la définition du thème en tant que fournisseur , avant toute utilisation des composants. Ces thèmes peuvent également être personnalisés.
http://www.material-ui.com/#/get-started/usage
Clairement indiqué avec l'extrait -
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')
);