Tôi đang cố gắng sử dụng enzyme
để xác nhận các nút DOM. Component
vẻ tôi nhưLoạiError: Không thể đọc thuộc tính 'equal' của undefined
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
trông giống như
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)
});
});
Khi tôi chạy này, tôi nhận được
● <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)
Theo Enzyme
docs,
.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.
Tôi đang làm gì sai?
Cảm ơn
CẬP NHẬT
tôi loại bỏ các import expect from 'expect
và chạy nó như
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);
});
});
Nó bây giờ không thành công với
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)
và với
expect(wrapper.contains(<TableHeaderColumn/>)).to.equal(true);
tôi nhận được
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)
tôi vẫn không thể khẳng định trên ReactElement
Thanks for the help, vui lòng xem cập nhật của tôi. Tôi vẫn còn bối rối – daydreamer
Bạn đã thử sử dụng 'expect (wrapper.find ('TableHeaderColumn'). Length === 5) .toEqual (true); '/' expect (wrapper.find (TableHeaderColumn) .length === 5) .toEqual (đúng); '? – QoP
Cảm ơn @QoP hai dòng đầu tiên của bạn đã giúp tôi ngay lập tức. Tôi nghi ngờ điều này sẽ xảy ra rất nhiều cho một người như tôi đã đi từ thử nghiệm đơn vị với mong đợi, để sử dụng các thư viện trợ giúp, chia vv, và không nhận thấy các sắc thái tinh tế với cú pháp. –