Material-ui: लेखन त्रुटि: अपरिभाषित की संपत्ति 'तैयार स्टाइल' पढ़ा नहीं जा सकता

मुझे लगता है कि यह https://github.com/callemall/material-ui/issues/4021 से संबंधित है

TL; DR : परीक्षण किए जा रहे घटक को <MuiThemeProvider /> या https://github.com/callemall/material-ui/issues/4021#issuecomment -210998829 में लपेटने का प्रयास करें।

क्या आपका मतलब निम्नलिखित जैसा कुछ था?

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

function setup() {
  return mount(
    <MuiThemeProvider>
      <TransactionList transactions={[]}/>
    </MuiThemeProvider>, {
      getChildContext() {
        return {muiTheme: getMuiTheme()};
      },
      childContextTypes: {muiTheme: React.PropTypes.object}
    });
}

describe("<TransactionList />", ()=> {
  it('renders four <TableHeaderColumn /> components', () => {
    const wrapper = mount(<TransactionList transactions={[]}/>);
    expect(wrapper.find(TableHeaderColumn)).to.have.length(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:24:20)

मुझे बताएं कि मैं क्या गलत कर रहा हूँ?

सामग्री-यूआई में जो परीक्षण मैं देखता हूं, उसके आधार पर, मैंने निम्नलिखित कोशिश की लेकिन फिर भी वही परिणाम:

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

describe("<TransactionList />", ()=> {
  const muiTheme = getMuiTheme();
  const mountWithContext = (node) => mount(node, {context: {muiTheme}});


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

@हिमांशु : क्या आप एक पेन प्रदान कर सकते हैं ताकि मैं इसे देख सकूं ?

@lucasbento , मैं कलम https://github.com/101bits/pluralsight-react द्वारा अपलोड किया

प्रजनन के चरण

- npm install
- npm start -s

अगर मुझे कुछ याद आया तो मुझे बताएं, धन्यवाद

हे @हिमांशु ,

आपकी समस्या के बारे में, मैं कभी भी context उपयोग नहीं करता, इसलिए मुझे नहीं पता कि यह कैसे काम करता है, लेकिन...

मैंने देखा कि this आपके घटक में अपरिभाषित था, मैंने इसे एक स्टेटलेस घटक के बजाय एक वर्ग में बदल दिया और जादू की तरह this उपलब्ध हो गया:

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

class TransactionList extends Component {
  render() {
    const { transactions } = this.props;

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

अपने परीक्षणों को _alot_ आज़माने के बाद, यहां बताया गया है कि यह कैसे काम करता है:

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

describe("<TransactionList />", ()=> {
  const mountWithContext = (node) => mount(node, {
    context: {
      muiTheme: getMuiTheme(),
    },
    childContextTypes: {
      muiTheme: React.PropTypes.object.isRequired,
    }
  });

  it('renders five <TableHeaderColumn /> components', () => {
    const wrapper = mount(<TransactionList transactions={[]}/>, {
      context: {
        muiTheme: getMuiTheme(),
      },
      childContextTypes: {
        muiTheme: React.PropTypes.object.isRequired,
      },
    });

    expect(wrapper.find(TableHeaderColumn)).to.have.length(5);
  });
});

मैं chai बजाय expect का भी उपयोग कर रहा हूं, आपका सिंटैक्स वास्तव में chai का उपयोग कर रहा था।

मैं जेस्ट का उपयोग करने की दृढ़ता से अनुशंसा करता हूं, स्नैपशॉट परीक्षण बहुत आसान है।

मैंने <TableHeaderColumn /> को 4 के बजाय 5 में भी बदल दिया, भले ही फ़ाइल पर 4 <TableHeaderColumn /> , एंजाइम 5 लौटाता है। ¯_(ツ)_/¯

आशा है कि यह आपके लिए अच्छा काम करेगा!

मैं भी इस समस्या का सामना कर रहा हूं। इसका समाधान अभी तक नहीं हो पाया है।

@ janoist1 : मैंने जो भेजा है, क्या आपने उसे

धन्यवाद, और हाँ मैंने किया। यह काम करता है लेकिन यह अभी भी एक कामकाज है। यह shallow भी काम करना चाहिए। अब मुझे जिस तरह से मैं find चाइल्ड कंपोनेंट्स को अपडेट करना था, क्योंकि प्रोप सिलेक्टर ने काम करना बंद कर दिया था। स्टैकओवरफ्लो प्रश्न
इसके अलावा, मैं यह उल्लेख करना चाहूंगा कि मुझे अपने घटक को रिएक्ट क्लास में बदलने की आवश्यकता नहीं है।

@ janoist1 जब मैं आपके उदाहरण का अनुसरण करता हूं तो मुझे मिलता है

Uncaught Exception: test/components/Foo/List/index.js
  RangeError: Invalid string length
    _combinedTickCallback (internal/process/next_tick.js:67:7)
    process._tickCallback (internal/process/next_tick.js:98:9)



  ✖ Test results were not received from test/components/Foo/List/index.js

मैं इस मुद्दे को बंद कर रहा हूं क्योंकि निर्माता के पास कोई जवाब नहीं है, अगर आपके पास और प्रश्न हैं तो कृपया stackoverflow.com पर पूछें।

@lucasbento मैं इस मुद्दे को भी देख रहा हूं, लेकिन परीक्षणों का उपयोग करते समय नहीं। बल्कि next.js . का उपयोग करके मेरे ऐप को संकलित करते समय

बस यह देखने के लिए कि मैंने आखिरी दिन बिताया है या इस मुद्दे को डीबग कर रहा है - और जब उत्तर मेरे लिए स्पष्ट होना चाहिए था, मैंने सोचा कि यह उल्लेख कर सकता है:

यदि आपके पास एक ऐप सेट अप है जो सर्वरसाइड रेंडरिंग का उपयोग करता है, तो आपको सर्वरसाइड और क्लाइंटसाइड ऐप दोनों को <MuiThemeProvider> लपेटने की आवश्यकता हो सकती है।

बस मामले में, मोचा के साथ माउंट का उपयोग करने के लिए आपको jsdom जैसा कुछ चाहिए या आपको document.createElement is not a function मिलेगा

यहां सेटअप देखें: https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md

मैंने हाल ही में एक ही मुद्दे का अनुभव किया .. यह घटक वर्ग के मेरे नामकरण का मुद्दा था .. इसलिए मैंने अपने घटक वर्गनाम, फ़ाइल नाम और आयात विवरण को मुख्य ऐप घटक में नए नाम से बदल दिया और यह काम करने लगा।

मुझे भी यही समस्या थी। मेरी समस्या यह थी कि मेरे पास क्लासनाम के बजाय मेरे जेएसएक्स डिव में से एक में क्लास एट्रिब्यूट था

आपको अपनी तालिका को MuiThemeProvider टैग में लपेटने की आवश्यकता है
https://stackoverflow.com/questions/39863436/typeerror-cannot-read-property-preparestyles-of-undefined समाधान है