Lỗi Loại: Không thể đọc thuộc 'prepareStyles' không xác định

Question

My Component trông giống như

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; 

Bài kiểm tra là

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); 
    }); 
}); 

phụ thuộc của tôi là

"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" 
    } 

Khi tôi chạy thử nghiệm tôi thấy

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) 

Hãy giúp tôi hiểu những gì đang xảy ra và tôi nên khắc phục điều này như thế nào? Tôi mới vào React và hệ sinh thái của nó

Answer 1

Bạn cần phải quấn bảng của bạn trong một thẻ MuiThemeProvider

như:

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

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