Asserting a Prop Contains a React Component

Question

I'm working with FixedDataTable (https://facebook.github.io/fixed-data-table/) and I simply want to assert that the column headers are set correctly. Here is my component definition:

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

My test is as follows:

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

The test fails with the error:

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

How do I test that the headers are set to the values that I want it to be? How do I create a matcher that tests against a proc?

I'm using enzyme, react, mocha, and chai.

score 0 · Answer 1 · answered Dec 15 '16 at 01:09

0

You could try using the Enzyme .is selector for checking that the component is a Cell and then check that it received a children prop of Column 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');

Documentation for .is: http://airbnb.io/enzyme/docs/api/ReactWrapper/is.html

answered Dec 15 '16 at 01:09

Ben Hare

4,365
5
27
44

no go. ```prop('header')``` is not an enzyme ShallowWrap'd component. It is a full blown component because enzyme seems to just follow the nodes and does not check the props if it should be shallow wrap'd or not. I get an error that "is" is not a function. – PressingOnAlways Dec 15 '16 at 01:13
Could you try finding the header Cell using a css selector and check that it's parent is wrapper.find(Table).childAt(0)? Otherwise I don't know sorry. – Ben Hare Dec 15 '16 at 01:23

score 0 · Answer 2 · answered Mar 26 '19 at 13:44

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

does not work because it compares object identity and you are comparing to a different object. Try to use a deep equals comparison instead:

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

score 0 · Answer 3 · answered Oct 10 '19 at 09:12

Since prop() returns ordinary object we can wrap that with shallow() or mount() to get Wrapper:

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

or use any other matchers as you do against Wrappers

Asserting a Prop Contains a React Component

3 Answers3