2016-10-07 3 views
5

enzyme을 사용하여 DOM 노드를 어설 션하려고합니다. 나는 이것을 실행하면, 내가 Enzymedocs 당으로TypeError : 정의되지 않은 'equal'속성을 읽을 수 없습니다.

● <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) 

을 얻을

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

처럼

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

같은 내 Component 외모는 내 test는 보이는

.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.

내가 뭘 잘못 했니?

감사

UPDATE
은 내가 import expect from 'expect을 제거하고 그것은

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) 

와 함께 지금 실패

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

로 실행

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) 

나는 여전히 Enzyme 문제가 아니에요 ReactElement

답변

18

에 주장 할 수 없습니다 얻을.

expect(...).toexpect.js을 설치했으며 chai 구문을 사용 중이므로 undefined입니다.

expect(wrapper.contains(<TableHeaderColumn>Name</TableHeaderColumn>)).to.equal(true) 

는 도움을, 내 업데이 트를 참조하십시오

expect(wrapper.contains(<TableHeaderColumn>Name</TableHeaderColumn>)).toEqual(true) 
+0

감사해야합니다. 나는 여전히 혼란 스럽다. – daydreamer

+1

'expect (wrapper.find ('TableHeaderColumn'). length === 5) .toEqual (true); '/'expect (wrapper.find (TableHeaderColumn) .length === 5) .toEqual (true);'? – QoP

+1

감사합니다. @QoP 처음 두 줄이 즉시 도움이되었습니다. 나는 기대와 함께 단위 테스팅에서 헬퍼 라이브러리, chia 등을 사용하고 신택스로 미묘한 뉘앙스에 주목하지 않은 나 같은 누군가에게 이것이 일어날 것으로 생각한다. –