I am trying to use enzyme to validate DOM nodes. My Component looks like
import React, {Component} from 'react'; import TransactionListRow from './TransactionListRow'; import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow} from 'material-ui/Table'; export default 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> ); } };
My test looks like
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 mountWithContext = (node) => mount(node, { context: { muiTheme: getMuiTheme(), }, childContextTypes: { muiTheme: React.PropTypes.object.isRequired, } }); it('renders five <TableHeaderColumn /> components', () => { const wrapper = mountWithContext(<TransactionList transactions={[]}/>) console.log(wrapper.html()); // expect(wrapper.find('thead').length).toBe(1); expect(wrapper.contains(<TableHeaderColumn>Name</TableHeaderColumn>)).to.equal(true) }); });
When I run this, I get
● <TransactionList /> › renders five <TableHeaderColumn /> components TypeError: Cannot read property 'equal' of undefined at Object.<anonymous> (src/components/transactions/__tests__/TransactionList.test.js:24:250) at process._tickCallback (internal/process/next_tick.js:103:7)
According to enzyme docs ,
.contains () expects a ReactElement element, not a selector (like many other methods). Make sure that when you call this, you call it with a ReactElement or JSX expression.
What am I doing wrong?
thanks
UPDATE
I removed import expect from 'expect and ran it as
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 = mountWithContext(<TransactionList transactions={[]}/>) // console.log(wrapper.html()); expect(wrapper.find('thead').length).toBe(1); expect(wrapper.find('td').length).toBe(0); // this is not working expect(wrapper.contains(<TableHeaderColumn/>)).toEqual(true); }); });
Now it fails with
FAIL src/components/transactions/__tests__/TransactionList.test.js ● <TransactionList /> › renders five <TableHeaderColumn /> components expect(received).toEqual(expected) Expected value to equal: true Received: false at Object.<anonymous> (src/components/transactions/__tests__/TransactionList.test.js:26:164)
and
expect(wrapper.contains(<TableHeaderColumn/>)).to.equal(true);
I get
Warning: Unknown props `onMouseEnter`, `onMouseLeave`, `onClick` on <th> tag. Remove these props from the element. FAIL src/components/transactions/__tests__/TransactionList.test.js ● <TransactionList /> › renders five <TableHeaderColumn /> components TypeError: Cannot read property 'equal' of undefined at Object.<anonymous> (src/components/transactions/__tests__/TransactionList.test.js:26:166) at process._tickCallback (internal/process/next_tick.js:103:7)
I still can't claim on ReactElement