断言道具包含一个反应组件

Question

我正在使用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>);
});

测试失败，错误：

在 对象（$$ typeof，type，...）}} 在上下文。（base/test/组件/test_table_test.jsx：82：83）

如何测试标题设置为我想要的值？如何创建针对PROC测试的匹配器？

我正在使用酶，反应，摩卡和柴。

Answer 1

您可以尝试使用酶。IS选择器检查组件是否为单元格，然后检查它是否收到了第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');

.is的文档：http：//airbnb.io/enzyme/docs/api/reactwrapper/is.html

Answer 2

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

不起作用，因为它比较对象身份，并且您正在与其他对象进行比较。尝试使用深层比较：

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

Answer 3

由于 prop()返回普通对象，我们可以用 shallow()或 mount()包装，以获取包装器：

expect(
  shallow(wrapper.find(Table).childAt(0).prop('header')).find(Cell).prop("children")
).to.equal("Column 1");

或与包装器一样使用任何其他匹配器