web-dev-qa-db-ja.com

TypeError：未定義のプロパティ「prepareStyles」を読み取ることができません

私のComponentは次のようになります

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;

テストは

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

私の依存関係は

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

テストを実行すると

 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)

何が間違っているのか、どうすれば修正できるのかを理解してください。私はReactとそのエコシステムが初めてです

javascriptreactjsmaterial-uienzyme
24
daydreamer

テーブルをMuiThemeProviderタグでラップする必要があります

のような：

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

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

マテリアルUIのウェブサイトに示されている順序で指示に従うと、すぐに解決策を見つけることができます。つまり、使用法セクションにあります。コンポーネントを使用する前に、テーマをProviderとして定義するための前提条件を宣言しました。これらのテーマはカスタマイズすることもできます。

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

スニペットで明確に述べられている-

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')
);
6
Narita