TypeError: Cannot read property 'prepareStyles' of undefined #5330
Comments
|
I guess this is related to #4021. TL;DR: try to wrap the component being tested in |
|
Did you mean something like following? I tried this as well, but still see Let me know what am I doing wrong? |
|
Based on the test that I see in material-ui, I tried the following but still same result |
|
@hhimanshu: can you provide a pen so I can check it out? |
|
@lucasbento , I do not know how to pen, so I uploaded by code https://github.com/101bits/pluralsight-react Steps to reproduce Let me know if I missed anything, thanks |
|
hey @hhimanshu, thanks for sharing that, really helpful. about your issue, I never use I saw that 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>
);
}
};After trying a lot your tests, here is how it worked: 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);
});
});I'm also using I strongly recommend using Jest, Snapshot testing is much easier. I also changed the number of Hope this works well for you! |
|
I'm also experiencing this issue. Have not been able to solve it yet. |
|
@janoist1: did you try what I sent? works pretty well here. |
|
Thanks, and yes I did. It works but it's still just a workaround. It should be work with |
|
@janoist1 when I follow your example I get |
|
I'm closing this issue since there's no answer form the creator, if you have further questions please ask on stackoverflow.com. |
|
@lucasbento I am seeing this issue as well, but not when using tests. Rather when compiling my app using next.js |
|
Just chiming in to see that I spent the last day or so debugging this issue - and while the answer should have been obvious to me, I thought it might bear mentioning: If you've got an app set up that uses serverside rendering, you may need to wrap both the serverside and clientside apps in |
|
Just in case, to use mount with mocha you need something like jsdom or you will get see setup here: https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md |
|
I experienced the same issue recently.. It was the issue of my naming of the component class.. So I renamed my component classname, filename and import statement in the main App component to the new name and it seemed to work. |
|
I had the same problem. My problem was that I had a class attribute in one of my jsx divs instead of className |
|
You need to wrap your table in a MuiThemeProvider tag |
Problem description
When I write test I get
TypeError: Cannot read property 'prepareStyles' of undefined
My
Componentlooks likeMy Test looks like
My
index.js(which is not related to test in my understanding) isSteps to reproduce
When I run
npm test:watch, I seeVersions
My dependencies are
The text was updated successfully, but these errors were encountered: