2016-12-15 67 views
0

我正在使用FixedDataTable(https://facebook.github.io/fixed-data-table/),我只是想声明列标题设置正确。这里是我的组件定义:断言道具包含反应组件

import React from 'react'; 
import {Table, Column, Cell} from 'fixed-data-table'; 

// Table data as a list of array. 
const rows = [ 
    ['a1', 'b1', 'c1'], 
    ['a2', 'b2', 'c2'], 
    ['a3', 'b3', 'c3'], 
    // .... and more 
]; 

// Render your table 

class TestTable extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Table 
     rowHeight={50} 
     rowsCount={rows.length} 
     width={900} 
     height={1000} 
     headerHeight={50}> 
     <Column 
      header={<Cell>Column 1</Cell>} 
      cell={<Cell>Column 1 static content</Cell>} 
      width={300} 
     /> 
     <Column 
      header={<Cell>Column 2</Cell>} 
      cell={<Cell>Column 2 static content</Cell>} 
      width={300} 
     /> 
     <Column 
     header={<Cell>Column 3</Cell>} 
     cell={({rowIndex, ...props}) => (
      <Cell {...props}> 
      Data for column 3: {rows[rowIndex][2]} 
      </Cell> 
     )} 
     width={300} 
     /> 
     </Table> 
    ); 
    } 
} 

我的测试如下:

import React from 'react'; 
import { shallow } from 'enzyme'; 
import {Table, Column, Cell} from 'fixed-data-table'; 

import TestTable from '../../src/components/test_table'; 

describe('<TestTable/>',() => { 

    it('renders a blank table',() => { 
     const wrapper = shallow(<TestTable/>); 
     //debugger; 
     expect(wrapper.find(Table)).to.have.length(1); 

     expect(wrapper.find(Table).children()).to.have.length(3); 

     expect(wrapper.find(Table).childAt(0).prop('header')).to.equal(<Cell>Column 1</Cell>); 
}); 

测试失败,出现错误:

‣ AssertionError: expected { Object ($$typeof, type, ...) } to equal { Object ($$typeof, type, ...) } at Context. (base/test/components/test_table_test.jsx:82:83)

如何测试的头被设置成我希望它的价值是什么?我如何创建一个测试对象的匹配器?

我使用酶,反应,摩卡和柴。

回答

0

你可以尝试使用的酶。就是选择用于检查的部件是电池,然后检查是否收到支撑柱1的孩子:

expect(wrapper.find(Table).childAt(0).prop('header').is(Cell)).to.be.true; 
expect(wrapper.find(Table).childAt(0).prop('header').childAt(0)).to.equal('Column 1'); 

的文档。是:http://airbnb.io/enzyme/docs/api/ReactWrapper/is.html

+0

不行。 '''prop('header')'''不是酶ShallowWrap的组件。它是一个完整的组件,因为酶似乎只是跟随节点,并且不检查道具是否应该被浅层包裹。我收到“is”的错误不是函数。 – PressingOnAlways

+0

你可以试着找到使用css选择器的单元格Cell,并检查它的父类是wrapper.find(Table).childAt(0)?否则我不知道对不起。 –