CODEWITHSUNDEEP
reactjsenzymejestjs
fasenberg
fasenberg

Reputation: 3095

React + Jest check component contains another component

I have DetailPanel component which contains Detail componet with title prop.

import React from 'react';
import Detail from './Detail';
import InfoTable from './InfoTable';
import EdgeIcon from './EdgeIcon';
import styles from './DetailsPanel.css';

export default class DetailsPanel extends React.PureComponent {

  renderTitle() {
    const { selectedEdge } = this.props;

    if (selectedEdge) {
      const sourceNode = 'sourceNode'
      const targetNode = 'targetNode'

      return (
        <span>
          {sourceNode}
          <EdgeIcon className={styles.arrowIcon} />
          {targetNode}
        </span>
      );
    }

    return 'default title';
  }

  render() {
    return (
      <Detail title={this.renderTitle()} />
    );
  }
}

I tying to check that if selectedEdge is true Detail title contains EdgeIcon component

test('Detail should contain EdgeIcon if there is selected edge', () => {
  const selectedEdge = { source: 1, target: 2 };
  const detailsPanel = shallow(
    <DetailsPanel
      {...props}
      selectedEdge={selectedEdge}
    />);
  expect(detailsPanel.contains('EdgeIcon')).toBeTruthy();
});

But test fails, because detailsPanel returns false

Upvotes: 2

Views: 14972

Answers (2)

Timofey Lavrenyuk
Timofey Lavrenyuk

Reputation: 407

You can try to use mount instead of shallow if you want to check deep children. For example:

test('Detail should contain EdgeIcon if there is selected edge', () => {
  const selectedEdge = { source: 1, target: 2 };
  const detailsPanel = mount(
    <DetailsPanel
      {...props}
      selectedEdge={selectedEdge}
    />);
  expect(detailsPanel.contains('EdgeIcon')).toBeTruthy();
});

Upvotes: 3

Jo&#227;o Vila&#231;a
Jo&#227;o Vila&#231;a

Reputation: 621

First, when testing a component, you shouldn't test its children. Each children should have its own test.

But if you really need to look into your component's children use mount instead of shallow.

Reference: http://airbnb.io/enzyme/docs/api/ReactWrapper/mount.html

Upvotes: 1

Related Questions