TypeError:无法读取未定义的属性“相等” [英] TypeError: Cannot read property 'equal' of undefined
问题描述
我正在尝试使用 enzyme
来断言DOM节点。我的组件
看起来像
I am trying to use enzyme
to assert 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>
);
}
};
我的测试
看起来像
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)
});
});
当我运行时,我得到
● <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)
根据酶
docs ,
.contains()期望一个ReactElement,而不是选择器(像许多其他
方法一样)。确保在调用它时使用ReactElement或JSX表达式调用
。
.contains() expects a ReactElement, not a selector (like many other methods). Make sure that when you are calling it you are calling it with a ReactElement or a JSX expression.
我是什么做错了?
谢谢
更新
我从'expect 中删除导入期望并将其作为
UPDATE
I removed the 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);
});
});
现在失败
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)
和
expect(wrapper.contains(<TableHeaderColumn/>)).to.equal(true);
我得到
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)
我仍然无法断言 ReactElement
推荐答案
这不是 Enzyme
问题。
expect(...)。到
是 undefined
因为你已经安装了 expect.js 你正在使用 chai 语法。
expect(...).to
is undefined
because you have installed expect.js and you are using chai syntax.
此
expect(wrapper.contains(<TableHeaderColumn>Name</TableHeaderColumn>)).to.equal(true)
应
expect(wrapper.contains(<TableHeaderColumn>Name</TableHeaderColumn>)).toEqual(true)
这篇关于TypeError:无法读取未定义的属性“相等”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!