断言一个 Prop 包含一个 React 组件

Posted 2023-02-21

【中文标题】断言一个 Prop 包含一个 React 组件

【英文标题】：Asserting a Prop Contains a React Component

【发布时间】：2017-04-30 11:42:37

【问题描述】：

我正在使用 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: 预期 Object ($$typeof, type, ...) 等于 对象 ($$typeof, type, ...) 在上下文。 (base/test/components/test_table_test.jsx:82:83)

如何测试标题是否设置为我想要的值？如何创建一个针对 proc 进行测试的匹配器？

我正在使用酵素、反应、摩卡和柴。

【参考方案1】：

您可以尝试使用 Enzyme .is 选择器来检查组件是否为 Cell，然后检查它是否收到了 Column 1 的 children 属性：

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

【讨论】：

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

您可以尝试使用 css 选择器找到标题单元格并检查它的父级是否为 wrapper.find(Table).childAt(0)？否则我不知道对不起。

【参考方案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>);

【参考方案3】：

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

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

或者像对 Wrappers 一样使用任何其他匹配器